jSide是一款jquery滑动侧边栏插件。该jquery滑动侧边栏支持多级菜单，采用响应式设计，支持CSS3动画，内置多种皮肤，兼容所有的主流浏览器，非常实用。

使用方法

在页面中引入jquery和jquery.jside.menu.js文件，以及jside-menu.css和jside-skins.css文件。

HTML

然后使用下面的HTML结构创建菜单。

 
  
    

      

        

           
        
      
      

        
 Username 
         Tagline 
      
    
   


                

另外还要使用div来创建一个遮罩层。

初始化插件

在页面DOM元素加载完毕之后，通过jSideMenu()方法来初始化该插件。

$(".menu-container").jSideMenu();             
                

你可以控制侧边栏的位置：

$(".menu-container").jSideMenu({
  jSidePosition: "position-right"
});            
                

也可以将侧边栏制作为静态的。

$(".menu-container").jSideMenu({
  jSideSticky: false
});
                

插件中内置了多种侧边栏皮肤，可以根据需要来切换。

$(".menu-container").jSideMenu({
  jSideSkin: "default-skin"
});
                

可用的皮肤有：

• flickr
• fb-messenger
• moonlit
• park-life
• d2f
• steel-man
• amethyst
• between-clouds
• crazy-orange
• endless-river

该jQuery滑动侧边栏插件的github地址为：https://github.com/CodeHimBlog/jquery-jside-menu