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

这篇文章主要介绍了jquery实现像栅栏一样左右滑出式二级菜单效果代码,涉及jquery鼠标click点击事件及页面元素动态操作的相关技巧,非常具有实用价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.html.cn/js/2015/jquery-left-right-show-nav-menu-codes/

具体代码如下：

  jQuery栅栏菜单左右划出菜单Grooveshark风格的菜单 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#
  百度
新浪
网易
腾讯
搜狐
天涯
  北京
上海
天津
重庆
成都
广州
常州
深圳
杭州
无锡
郑州
武汉