Question

我的网站上有以下bootstrap导航栏。

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">Mi Thai Resturant</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">About us</a></li>
         <li><a href="#">other locations</a></li>
      </ul>
   </div>
</nav>

我想要做的是当用户点击其他位置时，我希望另一个水平条显示在下方，其中包含其他位置的链接。实现这一目标的最佳方法是什么？

Answer 1

你可以使用一个小jQuery来显示/隐藏subnav onclick。

工作示例：http://www.bootply.com/iiVhh1BAGm

HTML

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">Mi Thai Resturant</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">About us</a></li>
         <li><a href="#" class="subnav-trigger">other locations</a></li>
      </ul>
   </div>
</nav>

<nav id="subnav" class="navbar navbar-default" role="navigation">
      <ul class="nav navbar-nav">
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
</nav>

的jQuery

$( ".subnav-trigger" ).click(function() {
  $( "#subnav" ).toggle();
});

CSS

#subnav {
 display:none; 
}

Answer 2

我想我有一段可以帮助你的代码。看看这个小提琴：http://jsfiddle.net/3zh4jxgh/。确保HTML部分中的jQuery代码位于HTML文件的HEAD中：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

   $("#main-menu").hover(
      function() {
         $("#submenu").animate({
         height: '+=102' /* add 51 to this number for each li class="text" in the submenu */
      }, '0' 
  );

   $(".text").css({"display": "block"
      }
   );


},

      function() {
         $("#submenu").animate({
         height: '-=102', /* add 51 to this number for each li class="text" in the submenu */
      }, '0'
  );

        $(".text").css({"display": "none"
      }
   );

   }
   );

   });


</script>

这是我在小提琴中使用的HTML：

<div id="main-menu" onClick="menu()">MENU</div>
<div id="submenu">

    <li class="text">A title</li>
    <li class="text">Another title</li>

</div>

CSS：

#main-menu {
    width:100%;
    height:50px;
    color:white;
    font-family:helvetica;
    position:relative;
    background-color:black;
    text-align:center;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
    transition: 0.5s ease-in-out;
    font-size:18pt;
}

#submenu {
    position:relative;
    width:100%;
    height:0px;
    background-color:grey;
}

.text {
    position:relative;
    display:block;
    width:100%;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:helvetica;
    display:none;
    color:white;
    transition: 0.5s ease-in-out;
    font-size:16pt;
    border-bottom:1px solid #434347;
}

小注意：在Fiddle中，我必须将jQuery添加到HTML文件才能工作。

如何将辅助导航栏添加到bootstrap导航栏

2 个答案: