关于jquery：将侧边栏链接添加到Bootstrap“汉堡”菜单

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

调整页面大小时，右上方显示的下拉菜单如下所示：

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"，即汉堡菜单出现的尺寸，这就是隐藏链接。

如果您希望将不一定要在其他导航栏中找到的项目添加到汉堡菜单，这是一个很好的解决方案。

也许这会有所帮助或给您一些想法。

您可以通过用navbar-left / navbar-right分隔导航链接，然后使用navbar-left作为宽度超过768px的边栏来做到这一点。然后，您的所有链接都将合并到767px以下的移动导航中。

注意：此设置适用于全角布局(使用container-fluid类)，如果使用container类，则必须对这些宽度进行调整。

请参见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