jquery实现像栅栏一样左右滑出式二级菜单效果代码

本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码。分享给大家供大家参考。具体如下：

这里演示了jquery实现像栅栏一样的左右滑出式二级菜单，会向左或向右滑出，支持中英文，使用时别忘了引入jquery插件。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/

具体代码如下：

body{font: 12px "Century Gothic", Tahoma, Verdana, Arial, sans-serif;margin: 0;overflow-x: hidden;}
#container{display: block;width: 100%;height: 500px;border-top: 5px solid #ccc;border-bottom: 5px solid #ccc;overflow-x: hidden;position: relative;}
.ui-gs-main{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-main ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-main ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;}
.ui-gs-main ul li: hover{background: #f0f2f5;}
.ui-gs-panel{display: block;width: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}
.ui-gs-panel ul{list-style: none;margin: 0;padding: 0;}
.ui-gs-panel ul li{display: block;width: 100%;padding-top: 15px;padding-bottom: 15px;text-indent: 25px;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;background: white;}
.ui-gs-panel ul li: hover{background: #f0f2f5;}
li.ui-active{background: #f0f2f5;}


 
 
  
   
    

     
主页
     
作品
     
链接
     
联系
    
   
   
    

     
最新更新
     
热点排行
     
时事政治
     
喜欢电影
     
我的音乐
     
我的收藏
     
程序人生
     
娱乐天地
     
婚姻生活
     
五花八门
    
   
   
    

     
jquery
     
ASP
     
PHP
     
JAVA
     
JSP
     
AJAX
     
ASP.NET
     
VC++
     
C#
    
   
   
    

     
百度
     
新浪
     
网易
     
腾讯
     
搜狐
     
天涯
    
   
   
    

     
北京
     
上海
     
天津
     
重庆
     
成都
     
广州
     
常州
     
深圳
     
杭州
     
无锡
     
郑州
     
武汉
    
   
  

希望本文所述对大家的jquery程序设计有所帮助。