Add sidebar links to Bootstrap “hamburger” menu
我在Bootstrap中创建了一个页面,该页面同时具有顶部导航栏和侧边栏。 当前,当您将页面尺寸缩小至较小尺寸(或在移动设备/平板电脑上查看)时,侧边栏消失,顶部栏的链接进入"汉堡"菜单(仅在较小的屏幕尺寸下显示该下拉菜单)。 我希望边栏的链接也添加到汉堡菜单中,但是当屏幕较大时,不要在顶部栏上显示。
目前,这里是我在顶部栏中显示的内容:
1 2 3 4 5 6 7 8 9 10 11 12 | <nav class="navbar navbar-inverse navbar-fixed-top"> (some other stuff) <ul class="nav navbar-nav navbar-right"> <li class="logout-link">Logout </li> </ul> </nav> |
这是我对侧栏(位于"行" div内)的要求:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <ul class="nav nav-sidebar"> <li> Fizz </li> <li> Buzz </li> <li> Blah </li> </ul> |
调整页面大小时,右上方显示的下拉菜单如下所示:
1 | logout |
我希望它看起来像这样:
1 2 3 4 5 | Fizz Buzz Blah ====== logout |
...而没有在全屏顶部添加" Fizz Buzz Blah"。 我怎样才能做到这一点? 我尝试将"下拉列表"和" nav-navbar"类添加到侧边栏列,但没有用。
我发现了一个替代的解决方案,可能比vanburen发布的解决方案不太优雅,但是我想分享一下,以防其他人遇到有用的情况。
我将"隐藏"列表项添加到具有注销链接的列表中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <ul class="nav navbar-nav navbar-right"> <li class="hidden-lg hidden-md hidden-sm dropdown-link">Fizz </li> <li class="hidden-lg hidden-md hidden-sm dropdown-link">Buzz </li> <li class="hidden-lg hidden-md hidden-sm dropdown-link">Blah </li> <li class="logout-link">Logout </li> </ul> |
如果屏幕尺寸不是" xs",即汉堡菜单出现的尺寸,这就是隐藏链接。
如果您希望将不一定要在其他导航栏中找到的项目添加到汉堡菜单,这是一个很好的解决方案。
也许这会有所帮助或给您一些想法。
您可以通过用
注意:此设置适用于全角布局(使用container-fluid类),如果使用
请参见FullPage上的示例工作片段。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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***/ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav"> <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> Brand <ul class="nav navbar-nav navbar-left"> <li> Fizz </li> <li> Buzz </li> <li> Blah </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> Logout </li> </ul> </nav> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> |