單擊下拉菜單時，展開引導導航欄

Question

您好，我想知道在單擊下拉菜單時是否可以擴展引導導航欄？ 請

點擊之前：

+------------------------------------------------+
|    THE NAVBAR -               dropdown menu \/ |
+------------------------------------------------+

點擊后：

+------------------------------------------------+
|    THE NAVBAR -               dropdown menu \/ |
|                                     submenu    |
+------------------------------------------------+

Answer 1

作為示例，這可能會有所幫助。 了解CSS后，這相對來說比較簡單。 還有像Yamm！3這樣的庫。

 .navbar-default { border-bottom: 4px solid #f00 !important; background: #fff !important; } .navbar-default .navbar-nav > li > a, .navbar-header a.navbar-brand { color: #f00; } .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #f00; border-bottom-color: #f00; } .menu-large { position: static !important; } .megamenu { padding: 20px 0px; width: 100%; } .megamenu> li > ul { padding: 0; margin: 0; } .megamenu> li > ul > li { list-style: none; } .megamenu> li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #f00; white-space: normal; } .megamenu> li ul > li > a:hover, .megamenu> li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .megamenu.dropdown-header { color: #428bca; font-size: 18px; } .megamenu img { width: 100%; height: 150px; padding: 5px; } @media (max-width: 768px) { .megamenu { margin-left: 0; margin-right: 0; } .megamenu> li { margin-bottom: 30px; } .megamenu> li:last-child { margin-bottom: 0; } .megamenu.dropdown-header { padding: 3px 15px !important; } .navbar-nav .open .dropdown-menu .dropdown-header { color: #fff; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a> </li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stuff <span class="caret"></span></a> <ul class="dropdown-menu megamenu row "> <li> <div class="col-sm-6 col-md-3 "> <a href="# " class="img-responsive "> <img src="http://placehold.it/300/f00/fff" /> </a> </div> <div class="col-sm-6 col-md-3 "> <a href="# " class="img-responsive "> <img src="http://placehold.it/300/f00/fff" /> </a> </div> <div class="col-sm-6 col-md-3 "> <a href="# " class="img-responsive "> <img src="http://placehold.it/300/f00/fff" /> </a> </div> <div class="col-sm-6 col-md-3 "> <a href="# " class="img-responsive "> <img src="http://placehold.it/300/f00/fff" /> </a> </div> </li> </ul> </li> <li class="dropdown menu-large "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Things <span class="caret"></span></a> <ul class="dropdown-menu megamenu row "> <li class="col-sm-3 "> <ul> <li class="dropdown-header ">Item I Main</li> <li><a href="# ">Item I Sub</a> </li> <li class="disabled "><a href="# ">Item II Sub</a> </li> <li><a href="# ">Item III Sub</a> </li> <li class="divider "></li> <li class="dropdown-header ">Item II Main</li> <li><a href="# ">Item I Sub</a> </li> <li><a href="# ">Item II Sub</a> </li> <li><a href="# ">Item III Sub</a> </li> <li><a href="# ">Item VI Sub</a> </li> </ul> </li> <li class="col-sm-3 "> <ul> <li class="dropdown-header ">Item III Main</li> <li><a href="# ">Item I Sub</a> </li> <li><a href="# ">Item II Sub</a> </li> <li><a href="# ">Item III Sub</a> </li> <li><a href="# ">Item VI Sub</a> </li> <li><a href="# ">Item V Sub</a> </li> <li class="divider "></li> <li class="dropdown-header ">Item IV Main</li> <li><a href="# ">Item I Sub</a> </li> </ul> </li> <li class="col-sm-3 "> <ul> <li class="dropdown-header ">Item V Main</li> <li><a href="# ">Item I Sub</a> </li> <li><a href="# ">Item II Sub</a> </li> <li><a href="# ">Item III Sub</a> </li> <li class="divider "></li> <li class="dropdown-header ">Item VI Main</li> <li><a href="# ">Item I Sub</a> </li> <li><a href="# ">Item II Sub</a> </li> <li><a href="# ">Item III Sub</a> </li> </ul> </li> <li class="col-sm-3 "> <ul> <li class="dropdown-header ">Item VII Main</li> <li><a href="# ">Item I Sub</a> </li> <li><a href="# ">Item II Sub</a> </li> <li><a href="# ">Item III Sub</a> </li> <li><a href="# ">Item VI Sub</a> </li> <li><a href="# ">Item V Sub</a> </li> <li><a href="# ">Item VI Sub</a> </li> <li><a href="# ">Item VII Sub</a> </li> <li><a href="# ">Item VIII Subp</a> </li> <li><a href="# ">Item VIIII Sub</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> 

Answer 2

嘗試使用引導崩潰，如下所示：

 .my-menu{ padding: 10px; } #collapse-menu{ margin-bottom: 0; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <nav class="navbar navbar-default my-nav-bar" role="navigation"> <a class="navbar-brand" href="#">Logotipo</a> <div class="pull-right my-menu"> <button href="#" class="dropdown-toggle btn btn btn-primary" data-toggle="collapse" data-target="#collapse-menu"> <!--add the atributes data-toggle="collapse" data-target="#collapse-menu" to the element that you want to be the collapser--> Dropdown Menu <b class="caret"></b> </button> <ul id="collapse-menu" class="list-group collapse"> <!--add the class "collapse" to the element that you want collapse--> <li class="list-group-item"><a href="#">Acción #1</a></li> <li class="list-group-item"><a href="#">Acción #2</a></li> </ul> </div> </nav>