0
$('.collapse').on('shown.bs.collapse', function (e) {
$('.collapse').not(this).removeClass('in');
});
$('[data-toggle=collapse]').click(function (e) {
$('[data-toggle=collapse]').parent('li').removeClass('active');
$(this).parent('li').toggleClass('active');
});header {
\t background-color:#3e3e3e;
}
header .logodesc img {
padding-top: 30px;
}
header .btn-prihlasit-cont{
\t padding-top:34px;
}
header .prihlasit {
\t padding: 7px 14px 7px 16px;
\t color: #404040;
\t font-size: 12px;
\t font-weight: bold;
\t text-transform:uppercase;
\t text-align: center;
\t background-color: #F2F2F2;
\t min-width: 210px;
}
.navbar {margin-bottom:0;}
.navbar-inverse{
\t background-color:#3e3e3e;
\t border:none;
}
.navbar-inverse .navbar-nav>li>a {
\t color:#fff;
}
.navbar-inverse .navbar-toggle {
\t border-color:transparent;
\t cursor:pointer;
\t color:#fff;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus {
\t color:#626262;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
\t color:#626262;
\t background-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
\t background-color: transparent;
\t color:#fff;
}
#topmenu {
\t border-bottom:solid 1px #626262;
\t border-radius:0;
}
#topmenu .dropdown, #topmenu .dropup{
\t background: url(../img/dropdbg.png) top right no-repeat;
}
#topmenu > ul > li:nth-child(2){
\t background: none;
}
@media (max-width: 767px) { /* XS */
\t .nav{width:100%;}
\t .navbar-brand-centered {
display: inline-block;
left: 0;
right: 0;
margin:0;
float:none;
}
.navbar-header{
text-align:center;
}
\t #topmenu .dropdown, #topmenu .dropup{
\t \t background:none;
\t }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Two rows navbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
\t <link href="css/reset.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
\t <link href="css/style.css" rel="stylesheet" id="style">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 hidden-xs">
\t \t <a class="logodesc" href="#">
<img alt="logo" width="155" height="52" src="img/logo.png" class="img-responsive">
</a>
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 paddR0">
<div class="navbar-header navbar-inverse hidden-lg hidden-md hidden-sm">
<button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
<img alt="logo" width="100" height="31" src="img/logo.png" class="img-responsive">
</a>
<a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">
</a>
</div>
<nav class="navbar navbar-inverse" role="navigation" id="topmenu">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a href="#" data-toggle="collapse" data-target="#one">One</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#two">Two</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-inverse" role="navigation" id="submenu">
<ul class="nav navbar-nav navbar-inverse collapse in" id="one">
<li><a href="#" id="">One sub 1</a></li>
<li><a href="#" id="">One sub 2</a></li>
<li><a href="#" id="">One sub 3</a></li>
<li><a href="#" id="">One sub 4</a></li>
\t <li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li>
</ul>
<ul class="nav navbar-nav navbar-inverse collapse" id="two">
<li><a href="#" id="">Two sub 1</a></li>
<li><a href="#" id="">Two sub 2</a></li>
<li><a href="#" id="">Two sub 3</a></li>
\t <li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a>
\t <form class="nav navbar-form" role="search" id="nav-header-search-collapse">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
\t </li>
</ul>
</nav>
</div>
<div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont">
\t <a href="#" class="btn prihlasit">Send a friend</a>
</div>
</div>
</div>
</header>
</body>
</html> 間ボタンI（3ブートストラップ）は、二列のナビゲーションバーを必要とします。
一番上のナビゲーションバー（Nav-A-1）の最初のリンクをクリックすると、一番下のナビゲーションバーにリンク（Nav-B-1 Nav-B-2 Nav-B-3など）の最初のリストが表示されます。一番上のNavbar（Nav-A-2）の2番目のリンクをクリックすると、下のNavbar（Nav-C-1 Nav-C-2 Nav-C-3など）にリンクの2番目のリストが表示されます。それはタブのようなものです。最初の「タブ」マストがアクティブになります。
LG、MD、SM
+ ------------------------------------- -------------------------------------------------- ---------------------------------------- +
| 。 。 。 。 。 。 。 。 。 。 | Nav-A-1。 。 。 Nav-A-2。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 |
|サイトロゴ| ----------------------------------------------- ------------------------------------------------ |ボタン| - +
| 。 。 。 。 。 。 。 。 。 。 | Nav-B-1。 。 Nav-B-2。 。 Nav-B-3。 。 Nav-B-4。 。 Search_icon。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 |
+ ----------------------------------------------- -------------------------------------------------- ------------------------------ +
XS
+ ------------- -------------------------------------------- +
| 。 。 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 |
| 。ハンバーガー 。 |サイトロゴ| Search_icon |
| 。 。 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 |
+ ----------------------------------------------- ---------- +
スーパー混乱、あなたはそれを簡単にしてくださいすることができます。 –
'Nav-A- *'と 'Nav-B- *'の違いは何ですか？ –
フォーマットに問題があります、ごめんなさい） –