網頁設計, 網頁資源

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

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

Step1
將html標籤加入class="easy-sidebar-active"。
<html class="easy-sidebar-active">

Step2
在body加入下方的html標籤。
<nav class="navbar navbar-inverse easy-sidebar">
<div class="container-fluid">
<div class="navbar-header">
<!--easy-sidebar-toggle-right -->
<button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false">
<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>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>

<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。
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//easy-sidebar-toggle-right
$('.easy-sidebar-toggle').click(function(e) {
e.preventDefault();
//$('body').toggleClass('toggled-right');
$('body').toggleClass('toggled');
//$('.navbar.easy-sidebar-right').removeClass('toggled-right');
$('.navbar.easy-sidebar').removeClass('toggled');
});
</script>

Step4
加入easy-sidebar.css。

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>li {
float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li>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>li {
float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li>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教學-左右滑出導覽列選單
[範例預覽-右選單] [範例預覽-左選單] [範例下載]
UAG軍規iPhone防摔殼