Foundation 滑動導航(Off-Canvas)
Foundation 滑動導航(Off-Canvas)
側邊欄導航
Off-Canvas 滑動導航現在逐漸在移動頁面變得越來越流行了 (點擊菜單按鈕菜單從左側滑出):
創建滑動導航
創建滑動導航實例如下：
實例
<!-- 最外層div：頁面布局 -->
<div class="off-canvas-wrap" data-offcanvas>
<!-- 內部元素: "工具欄" 內容 (圖標, 鏈接, 描述內容等)-->
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Off-canvas Example</h1>
</section>
</nav>
<!-- 滑動菜單 -->
<aside class="left-off-canvas-menu">
<!-- Add links or other stuff here -->
<ul class="off-canvas-list test">
<li><label>Heading</label></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</aside>
<!-- 主要內容 -->
<section class="main-section">
<h3>Lorem Ipsum</h3>
<p>....</p>
</section>
<!-- 關閉菜單 -->
<a class="exit-off-canvas"></a>
</div> <!-- 結束內部內容 -->
</div> <!-- 結束滑動菜單 -->
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
<div class="off-canvas-wrap" data-offcanvas>
<!-- 內部元素: "工具欄" 內容 (圖標, 鏈接, 描述內容等)-->
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Off-canvas Example</h1>
</section>
</nav>
<!-- 滑動菜單 -->
<aside class="left-off-canvas-menu">
<!-- Add links or other stuff here -->
<ul class="off-canvas-list test">
<li><label>Heading</label></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</aside>
<!-- 主要內容 -->
<section class="main-section">
<h3>Lorem Ipsum</h3>
<p>....</p>
</section>
<!-- 關閉菜單 -->
<a class="exit-off-canvas"></a>
</div> <!-- 結束內部內容 -->
</div> <!-- 結束滑動菜單 -->
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
嘗試一下 »