bootstrap两行导航栏（顶行中的链接切换底行中的导航栏），行之间的按钮

时间：2017-12-10 19:13:13

标签： javascript html css twitter-bootstrap twitter-bootstrap-3 

$('.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 {
	background-color:#3e3e3e;
}
header .logodesc img {
    padding-top: 30px;
}
header .btn-prihlasit-cont{
	padding-top:34px;
}
header .prihlasit {
	padding: 7px 14px 7px 16px;
	color: #404040;
	font-size: 12px;
	font-weight: bold;
	text-transform:uppercase;
	text-align: center;
	background-color: #F2F2F2;
	min-width: 210px;
}
.navbar {margin-bottom:0;}
.navbar-inverse{
	background-color:#3e3e3e;
	border:none;
}
.navbar-inverse .navbar-nav>li>a {
	color:#fff;
}
.navbar-inverse .navbar-toggle {
	border-color:transparent;
	cursor:pointer;
	color:#fff;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus {
	color:#626262;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
	color:#626262;
	background-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
	background-color: transparent;
	color:#fff;
}
#topmenu {
	border-bottom:solid 1px #626262;
	border-radius:0;
}
#topmenu .dropdown, #topmenu .dropup{
	background: url(../img/dropdbg.png) top right no-repeat;
}
#topmenu > ul > li:nth-child(2){
	background: none;
}
@media (max-width: 767px) { /* XS */
	.nav{width:100%;}
	.navbar-brand-centered {
        display: inline-block;
        left: 0;
        right: 0;
        margin:0;
        float:none;
    }

    .navbar-header{
        text-align:center;
    }
	#topmenu .dropdown, #topmenu .dropup{
		background:none;
	}
}
<!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">
	<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">
	<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>
	<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">
		<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>
	  <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>
	  <li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a>
	  <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>
	  </li>
    </ul>
  </nav>
</div>
<div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont">
	<a href="#" class="btn prihlasit">Send a friend</a>
</div>
</div>
</div>
</header>
</body>
</html>

我需要一个这样的两行导航栏（bootstrap 3） 当我点击顶部导航栏中的第一个链接（Nav-A-1）时 - 在底部导航栏中，我看到了第一个链接列表（Nav-B-1 Nav-B-2 Nav-B-3等）。当我点击顶部导航栏中的第二个链接（Nav-A-2）时 - 我看到底部导航栏中的第二个链接列表（Nav-C-1 Nav-C-2 Nav-C-3等）。它就像一个标签。第一个“标签”桅杆是活动的。

LG，MD，SM
+ ------------------------------------------------- -------------------------------------------------- ---------------------------- +
| 。 。 。 。 。 。 。 。 。 。 。| Nav-A-1。 。 。 Nav-A-2。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。|
| SITE LOGO | ----------------------------------------------- ------------------------------------------------ |按钮| - +
| 。 。 。 。 。 。 。 。 。 。 。| Nav-B-1。 。 Nav-B-2。 。 Nav-B-3。 。 Nav-B-4。 。 Search_icon。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 |
+ ------------------------------------------------- -------------------------------------------------- ---------------------------- +
XS
+ ------------------------------------------------- -------- +
| 。 。 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 。|
| 。汉堡包 。 。|网站LOGO | Search_icon |
| 。 。 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 | 。 。 。 。 。 。 。 。 。 。 。|
+ ------------------------------------------------- -------- +

1 个答案:

答案 0 :(得分：0)

我找到了解决方案。我使用nav-pills，没有javascript！

＆＃13;
＆＃13; 
header {
	background-color:#3e3e3e;
}
header .logodesc img {
    padding-top: 30px;
}
header .btn-prihlasit-cont{
	padding-top:22px;
}
header .prihlasit {
	padding: 7px 14px 7px 16px;
	color: #404040;
	font-size: 12px;
	font-weight: bold;
	text-transform:uppercase;
	text-align: center;
	background-color: #F2F2F2;
	min-width: 210px;
}
.navbar {margin-bottom:0;}
.navbar-inverse{
	background-color:#3e3e3e;
	border:none;
}
.navbar-inverse .navbar-nav>li>a, .navbar-nav>li>a {
	color:#fff;
}
.navbar-inverse .navbar-toggle {
	border-color:transparent;
	cursor:pointer;
	color:#fff;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus {
	color:#626262;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
	color:#626262;
	background-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
	background-color: transparent;
	color:#fff;
}
#nav-header-links-collapse{
	width:100%;
}
.nav-pills {
    border-bottom: solid 1px #626262;
}
.nav-pills>li>a {
	color:#626262;
}
.nav>li>a:focus, .nav>li>a:hover{
	color:#fff;
	background-color: #000;
	border-radius:0;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
	border-radius:0;
	background-color: transparent;
}
a.navbar-toggle.glyphicon.glyphicon-search {
    padding-top: 5px;
    padding-bottom: 5px;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>Promotional Columns - Bootsnipp.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<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">
	<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>
	<link href="css/style.css" rel="stylesheet" id="style">
</head>
<body>
<header>
<div class="container">
  <div class="row">
  <!--navbar -->
  <div class="col-lg-2 col-sm-2 hidden-xs">
		<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>
  <div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">
  <ul  class="nav nav-pills">
			<li class="active">
        <a  href="#1a" data-toggle="tab">Overview</a>
			</li>
			<li><a href="#2a" data-toggle="tab">Using nav-pills</a>
			</li>
			
  </ul>
  <div class="tab-content clearfix">
			  <div class="tab-pane active" id="1a">
				<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>
					<li class="hidden-xs"><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li>
				</ul>
			  </div>
			  <div class="tab-pane" id="2a">
				<ul class="nav navbar-nav navbar-inverse collapse in" id="two">
					<li><a href="#" id="">One sub 11</a></li>
					<li><a href="#" id="">One sub 12</a></li>
					<li><a href="#" id="">One sub 13</a></li>
					<li><a href="#" id="">One sub 14</a></li>
					<li class="hidden-xs"><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li>
				</ul>
			  </div>

        
  </div>
  </div>
                <form class="nav navbar-form collapse" 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>
</div>
<div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont">
	<a href="#" class="btn prihlasit">Send a friend</a>
</div>
</div>
</div>
<!--navbar -->
	
</header>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题