首页 文章

添加侧栏链接到Bootstrap“hamburger”菜单

提问于
浏览
1

我有一个在Bootstrap中制作的页面,它有一个顶部导航栏和一个侧边栏 . 目前,当您将页面调整为较小尺寸(或在移动设备/平板电脑上查看)时,侧边栏会消失,顶栏的链接会进入“汉堡包”菜单(仅在较小屏幕尺寸下显示的下拉菜单) . 我希望侧边栏的链接也可以添加到汉堡菜单中,但是当屏幕很大时,不要在顶栏上显示 .

目前这里是我对顶栏的看法:

<nav class="navbar navbar-inverse navbar-fixed-top">
(some other stuff)
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="logout-link"><a href="logout url">Logout</a></li>
      </ul>
    </div>
</nav>

这是我对侧栏(位于'行'div)内的内容:

<div class="col-sm-2 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="fizz">Fizz</a></li>
        <li><a href="buzz">Buzz</a></li>
        <li><a href="blah">Blah</a></li>
      </ul>
    </div>

当您调整页面大小时,右上角显示的下拉菜单如下所示:

logout

我希望它看起来像这样:

Fizz
Buzz
Blah
======
logout

...没有将“Fizz Buzz Blah”添加到全尺寸屏幕的顶部栏 . 我怎样才能做到这一点?我尝试将“下拉列表”和“nav-navbar”类添加到侧栏列,但它不起作用 .

2 回答

  • 0

    我找到了一个替代的,可能不如vanburen发布的那么优雅的解决方案,但我想分享它,以防其他任何人有一个有用的情况 .

    我将“隐藏”列表项添加到具有注销链接的列表中:

    <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="fizz">Fizz</a></li>
            <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="buzz">Buzz</a></li>
            <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="blah">Blah</a></li>
            <li class="logout-link"><a href="logout">Logout</a></li>
          </ul>
        </div>
    

    如果屏幕不是'xs'大小,这是汉堡包菜单出现的大小,它的作用是隐藏链接 .

    如果您想要添加到汉堡包菜单中的项目不一定在不同的导航栏中找到,这是一个很好的解决方案 .

  • 0

    也许这会有所帮助或给你一些想法 .

    您可以通过将导航链接与 navbar-left / navbar-right 分开,然后使用 navbar-left 作为侧边栏,宽度超过768px . 然后,所有链接将在767px下的移动导航中整合 .

    注意:此设置用于全宽布局(使用容器 - 流体类),如果您使用 container 类,则必须对这些宽度进行调整 .

    请参阅FullPage上的工作示例代码段 .

    body {
      padding-top: 50px;
    }
    @media screen and (min-width: 768px) {
      .sidebar-nav .navbar-nav.navbar-left {
        top: 50px;
        bottom: 0;
        left: 0;
        width: 150px;
        position: fixed;
        background: #222;
      }
      .sidebar-nav .navbar-nav.navbar-left > li {
        display: block;
        float: none;
      }
      .main-content {
        margin-left: 150px;
      }
    }
    /***FOR DEMO ONLY***/
    
    .main-content .thumbnail {
      border: none;
      border-radius: 0;
      background: rgba(255, 255, 255, 0.75);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20);
      padding: 25px;
      max-width: 500px;
      margin: 12.5px auto;
    }
    /***FOR DEMO ONLY***/
    
    <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.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <div class="wrapper">
      <nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav">
        <div class="container-fluid">
          <div class="navbar-header">
            <button data-toggle="collapse" data-target="#bs-nav" type="button" class="navbar-toggle collapsed"><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="#">Brand</a>
          </div>
          <div class="navbar-collapse collapse" id="bs-nav">
            <ul class="nav navbar-nav navbar-left">
              <li><a href="#">Fizz</a>
              </li>
              <li><a href="#">Buzz</a>
              </li>
              <li><a href="#">Blah</a>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Logout</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    
      <div class="main-content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    

相关问题