手机页面常用到的jQuery Sidebar 侧边栏

洪雅健
2023-12-01

在线实例

左边栏右边栏

使用方法

  1.     <div class="txt">
  2.             <p class="btn">
  3.                 <span id="toggle-sidebar">展 开</span>
  4.             </p>
  5.             <p>Simpler Sidebar 是一款简单的 jQuery 侧边栏插件</p>
  6.             <p>请点击按钮查看效果</p>
  7.         </div>
  8.         <div class="sidebar" id="sucaihuo">
  9.             <div class="sidebar-wrapper" id="sidebar-wrapper">
  10.                 <ul class="nav">
  11.                     <li><a href="#">手册网</a></li>
  12.                     <li><a href="#">js</a></li>
  13.                     <li><a href="#">素材</a></li>
  14.                     <li><a href="#">模板</a></li>
  15.                     <li><a href="#">联系</a></li>
  16.                 </ul>
  17.             </div>
  18.         </div>
  19.         <script src="/api/jq/5733e36361fd7/js/jquery-1.11.3.min.js"></script>
  20.         <script src="/api/jq/5733e36361fd7/js/simpler-sidebar.min.js"></script>
  21.         <script>
  22.             $(function() {
  23.                 $('#sucaihuo').simplerSidebar({
  24.                     opener: '#toggle-sidebar',
  25.                     sidebar: {
  26.                         align: 'left',
  27.                         width: 250
  28.                     }
  29.                 });
  30.             });
  31.         </script>
复制

 

 类似资料: