VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 滑动导航

创建滑动导航

创建滑动导航实例如下：

实例



    

  1. 
<!-- 最外层div：页面布局 -->
    2. 

  2. 
<div class="off-canvas-wrap" data-offcanvas>
    3. 

  3. 
  <!-- 内部元素: "工具栏" 内容 (图标, 链接, 描述内容等)-->
    4. 

  4. 
  <div class="inner-wrap">
    5. 

  5. 
    <nav class="tab-bar">
    6. 

  6. 
      <section class="left-small">
    7. 

  7. 
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
    8. 

  8. 
      </section>
    9. 

  9. 
      <section class="middle tab-bar-section">
    10. 

  10. 
        <h1 class="title">Off-canvas Example</h1>
    11. 

  11. 
      </section>
    12. 

  12. 
    </nav>
    13. 

  13. 
    <!-- 滑动菜单 -->
    14. 

  14. 
    <aside class="left-off-canvas-menu">
    15. 

  15. 
      <!-- Add links or other stuff here -->
    16. 

  16. 
      <ul class="off-canvas-list test">
    17. 

  17. 
        <li><label>Heading</label></li>
    18. 

  18. 
        <li><a href="#">Link 1</a></li>
    19. 

  19. 
        <li><a href="#">Link 2</a></li>
    20. 

  20. 
        ...
    21. 

  21. 
      </ul>
    22. 

  22. 
    </aside>
    23. 

  23. 
    <!-- 主要内容 -->
    24. 

  24. 
    <section class="main-section">
    25. 

  25. 
      <h3>Lorem Ipsum</h3>
    26. 

  26. 
      <p>....</p>
    27. 

  27. 
    </section>
    28. 

  28. 
    <!-- 关闭菜单 -->
    29. 

  29. 
    <a class="exit-off-canvas"></a>
    30. 

  30. 
  </div> <!-- 结束内部内容 -->
    31. 

  31. 
</div> <!-- 结束滑动菜单 -->
    32. 

  32. 
<!-- 初始化 Foundation JS -->
    33. 

  33. 
<script>
    34. 

  34. 
$(document).ready(function() {
    35. 

  35. 
    $(document).foundation();
    36. 

  36. 
})
    37. 

  37. 
</script>
    38. 




复制



实例预览 »



 






    













相关教程