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

梅問題-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教學-左右滑出導覽列選單
[範例預覽-右選單] [範例預覽-左選單] [範例下載]

相關文章

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Animate.css」讓Boostrap導覽列的下拉選單動起來

「Animate.css」讓Boostrap導覽列的下拉選單動起來





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    李介介 說道:

    範例預覽-左選單 的連結失效喔

    回應:
    感謝告知已修正了