小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
 

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 >

尝试一下 »