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

在线实例

左边栏

右边栏

使用方法

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>

复制

下载