Bootstrap教學-左右滑出導覽列選單

html images

( ! ) Warning: array_keys() expects parameter 1 to be array, null given in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2039
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.888313011408GeSHi->build_parse_cache( ).../geshi.php:2181
170.888313011784array_keys ( ).../geshi.php:2039

( ! ) Warning: Invalid argument supplied for foreach() in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2039
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.888313011408GeSHi->build_parse_cache( ).../geshi.php:2181

( ! ) Warning: Invalid argument supplied for foreach() in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2411
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319

( ! ) Warning: implode(): Argument must be an array in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3365
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088
170.895213026680implode ( ).../geshi.php:3365

( ! ) Warning: array_keys() expects parameter 1 to be array, null given in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3388
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088
170.895613026784array_keys ( ).../geshi.php:3388

( ! ) Warning: Invalid argument supplied for foreach() in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3388
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088

( ! ) Warning: Invalid argument supplied for foreach() in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3429
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088

( ! ) Warning: array_keys() expects parameter 1 to be array, null given in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3481
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088
170.896613034976array_keys ( ).../geshi.php:3481

( ! ) Warning: Invalid argument supplied for foreach() in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3481
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088

( ! ) Warning: array_keys() expects parameter 1 to be array, null given in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3626
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088
170.922313030920array_keys ( ).../geshi.php:3626

( ! ) Warning: Invalid argument supplied for foreach() in /home/pwdeditc/public_html/wordpress/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3626
Call Stack
#TimeMemoryFunctionLocation
10.0007357504{main}( ).../index.php:0
20.0010358128require( '/home/pwdeditc/public_html/wordpress/wp-blog-header.php' ).../index.php:17
30.751512425856require_once( '/home/pwdeditc/public_html/wordpress/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.754112434704include( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/single.php' ).../template-loader.php:74
50.818912928928get_template_part( ).../single.php:7
60.818912929448locate_template( ).../general-template.php:155
70.819012929576load_template( ).../template.php:647
80.819112930344require( '/home/pwdeditc/public_html/wordpress/wp-content/themes/mh-newsdesk-lite/content-single.php' ).../template.php:690
90.821412934536the_content( ).../content-single.php:9
100.821512942728apply_filters( ).../post-template.php:240
110.821512943128WP_Hook->apply_filters( ).../plugin.php:203
120.825112972624WP_Syntax::afterFilter( ).../class-wp-hook.php:286
130.825112972720preg_replace_callback ( ).../wp-syntax.php:342
140.888212997352WP_Syntax::highlight( ).../wp-syntax.php:342
150.888313007264GeSHi->parse_code( ).../wp-syntax.php:319
160.895113018488GeSHi->parse_non_string_part( ).../geshi.php:3088

這次總統選舉,三大候選人的官網都有支援RWD自適應網頁,讓支持者無論是使用桌機、平板、手機,都能正常的瀏覽網站,並時時觀注候選人的動態,而在這三大候選人之中,小英除了官網外,還有一個CI的設計規範網頁,一樣也是支援RWD自適應網頁,但比較特別的是,一般都是在手機模式下,才會顯示選單鈕,按一下後才將選單推出,但這個功能則是放在桌機版,直接點上方的目錄,立即就會推出選單,但它則是在上面蓋一層圖層,並將選單滑出,而梅干上網爬了一下文,找到一個類似的效果,唯一的差別則在於,當選單滑出時,內容也會一併被推出去,但網路上這範例只限左選單,梅干作了小修改,讓選單無論在左還右都能滑出,同時一樣架構於Bootstrap下使用。
Step1
將html標籤加入class=”easy-sidebar-active”。

1
<html class="easy-sidebar-active">

Step2
在body加入下方的html標籤。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav class="navbar navbar-inverse easy-sidebar">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header"><!--easy-sidebar-toggle-right --> <button class="navbar-toggle easy-sidebar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Brand</a></div>
&nbsp;
<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
</ul>
</ul>
&nbsp;
 
</div>
</div>
	<li><a href="#">Link</a></li>
<!-- /.container-fluid -->
 
</nav>&nbsp;
<div class="container">
<h1>Bootstrap Easy Sidebar Example</h1>
<!--easy-sidebar-toggle-right --> <button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
 
</div>

Step3
在/body上方,加入下方的script。


    
 

Step4
加入easy-sidebar.css。

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
html.easy-sidebar-active {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
margin: 0;
padding: 0;
}
body {
transition: 0.2s ease;
min-height: 100%;
margin: 0;
padding: 0;
}
body.toggled {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.navbar.easy-sidebar {
transition: 0.2s ease;
position: absolute;
width: 250px;
top: 0;
left: -250px;
min-height: 100%;
border-radius: 0;
margin: 0;
z-index: 9999;
}
.navbar.easy-sidebar.toggled {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
body.toggled-right {
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
.navbar.easy-sidebar-right {
transition: 0.2s ease;
position: absolute;
width: 250px;
top: 0;
right: -250px;
min-height: 100%;
border-radius: 0;
margin: 0;
z-index: 9999;
}
.navbar.easy-sidebar-right.toggled-right {
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
.easy-sidebar .btn {
width: 100%;
}
.navbar.easy-sidebar .navbar-header {
margin: 0 -15px;
float: none;
}
.navbar.easy-sidebar .navbar-brand {
margin: 0;
}
.navbar.easy-sidebar .navbar-toggle {
display: inline-block;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(2) {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: translate(2px, -5px) rotate(45deg);
transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(3) {
display: none;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(4) {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
transform: translate(2px, 4.5px) rotate(-45deg);
}
.navbar.easy-sidebar .nav.navbar-nav {
margin: 7.5px -15px;
float: none;
}
.navbar.easy-sidebar .nav.navbar-nav&gt;li {
float: none;
}
.navbar.easy-sidebar .nav.navbar-nav&gt;li&gt;a {
padding: 10px 15px;
}
.navbar.easy-sidebar .navbar-nav .open .dropdown-menu .divider {
box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
.navbar.easy-sidebar .navbar-form {
padding: 10px 15px;
margin: 8px -15px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar .navbar-form .form-group {
margin-bottom: 5px;
display: block;
}
.navbar.easy-sidebar .navbar-form .form-group .form-control {
display: block;
width: 100%;
}
/**/
.navbar.easy-sidebar-right .navbar-header {
margin: 0 -15px;
float: none;
}
.navbar.easy-sidebar-right .navbar-brand {
margin: 0;
}
.navbar.easy-sidebar-right .navbar-toggle {
display: inline-block;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(2) {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: translate(2px, -5px) rotate(45deg);
transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(3) {
display: none;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(4) {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
transform: translate(2px, 4.5px) rotate(-45deg);
}
.navbar.easy-sidebar-right .nav.navbar-nav {
margin: 7.5px -15px;
float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav&gt;li {
float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav&gt;li&gt;a {
padding: 10px 15px;
}
.navbar.easy-sidebar-right .navbar-nav .open .dropdown-menu .divider {
box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
.navbar.easy-sidebar-right .navbar-form {
padding: 10px 15px;
margin: 8px -15px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar-right .navbar-form .form-group {
margin-bottom: 5px;
display: block;
}
.navbar.easy-sidebar-right .navbar-form .form-group .form-control {
display: block;
width: 100%;
}
@media (max-width: 768px) {
body.toggled {
position: fixed;
}
}

Step5
完成後,可看到一個按鈕,當按一下就可將左選單的導覽開啟。
梅問題-Bootstrap教學-左右滑出導覽列選單


Step6
而梅干作了小調整,只要把註解中的替換後,就可變成右選單,可看下方的範例預覽,或下載原檔比較容易理解。
梅問題-Bootstrap教學-左右滑出導覽列選單

本文出處:minwt

Be the first to comment on "Bootstrap教學-左右滑出導覽列選單"

Leave a comment

Your email address will not be published.


*