带有子菜单的响应式导航栏

Question

我需要制作一个包含项目和子项目的响应式导航栏菜单。我尝试过使用引导程序，但添加子菜单变得不方便。

有什么工具、框架、代码或插件可以帮助我解决这个问题？

我的网站是用 AngularJS 制作的。

Answer 1

带有子菜单的引导导航栏

$(document).ready(function() {
  $('.navbar a.dropdown-toggle').on('click', function(e) {
    var $el = $(this);
    var $parent = $(this).offsetParent(".dropdown-menu");
    $(this).parent("li").toggleClass('open');

    if (!$parent.parent().hasClass('nav')) {
      $el.next().css({
        "top": $el[0].offsetTop,
        "left": $parent.outerWidth() - 4
      });
    }

    $('.nav li.open').not($(this).parents("li")).removeClass("open");

    return false;
  });
});

@media (min-width: 767px) {
  .navbar-nav .dropdown-menu .caret {
    transform: rotate(-90deg);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      <a class="navbar-brand" href="#">NavBar</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub</a></li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action [Menu 1.1]</a></li>
            <li><a href="#">Another action [Menu 1.1]</a></li>
            <li><a href="#">Something else here [Menu 1.1]</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link [Menu 1.1]</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link [Menu 1.1]</a></li>
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a>

              <ul class="dropdown-menu">
                <li><a href="#">Action [Menu 1.2]</a></li>
                <li>
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a>

                  <ul class="dropdown-menu">
                    <li>
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a>

                      <ul class="dropdown-menu">
                        <li><a href="#">Action [Menu 1.4]</a></li>
                        <li><a href="#">Another action [Menu 1.4]</a></li>
                        <li><a href="#">Something else here [Menu 1.4]</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link [Menu 1.4]</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link [Menu 1.4]</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action [Menu 2.1]</a></li>
            <li><a href="#">Another action [Menu 2.1]</a></li>
            <li><a href="#">Something else here [Menu 2.1]</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link [Menu 2.1]</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link [Menu 2.1]</a></li>
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.1] <b class="caret"></b></a>

              <ul class="dropdown-menu">
                <li><a href="#">Action [Menu 2.2]</a></li>
                <li><a href="#">Another action [Menu 2.2]</a></li>
                <li><a href="#">Something else here [Menu 2.2]</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link [Menu 2.2]</a></li>
                <li class="divider"></li>
                <li>
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.2] <b class="caret"></b></a>

                  <ul class="dropdown-menu">
                    <li>
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.3] <b class="caret"></b></a>

                      <ul class="dropdown-menu">
                        <li><a href="#">Action [Menu 2.4]</a></li>
                        <li><a href="#">Another action [Menu 2.4]</a></li>
                        <li><a href="#">Something else here [Menu 2.4]</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link [Menu 2.4]</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link [Menu 2.4]</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

Answer 2

你可以试试这个：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <div class="col-md-12 clearfix">
      <div class="row"> 
      <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      </div>
    </div>

    <div class="col-md-12 clearfix"> 
    <div class="row">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
    </div>
    </div>

  </div>

它将如下所示：