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

本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码。分享给大家供大家参考。具体如下：
这里演示了jquery实现像栅栏一样的左右滑出式二级菜单，会向左或向右滑出，支持中英文，使用时别忘了引入jquery插件。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/
具体代码如下：

<！DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery栅栏菜单左右划出菜单</title><title>Grooveshark风格的菜单</title><script type="text/javascript" src="jquery1.3.2.js"></script><script type="text/javascript">//jquery.grooveshark.jsjQuery.fn.grooveshark = function（） {return this.each（function（） {var raw = this;var elm = jQuery（this）;var width = elm.width（）;var tel = 1;var smw = （width - 150） + "px";jQuery（".ui-gs-panel", raw）.css（"left", width + "px"）.hide（）;jQuery（".ui-gs-panel li", raw）.css（width, smw）;jQuery（".ui-gs-main li", raw）.click（function（） { var panel = jQuery（this）.attr（"rel"）; jQuery（".ui-gs-main li", raw）.each（function（） {var el = jQuery（this）;if（el.hasClass（"ui-active"）） el.removeClass（"ui-active"）; }）; jQuery（this）.addClass（"ui-active"）; jQuery（".ui-gs-main", raw）.animate（{ width: "150px" }, 1000）; jQuery（"." + panel, raw）.css（"z-index", tel += 1）.show（）.animate（{ "left": "150px" }, 1000, function（） {jQuery（".ui-gs-panel", raw）.each（function（） { if（jQuery（this）.hasClass（panel） == false） {jQuery（this）.css（"left", width + "px"）;jQuery（this）.css（"z-index", "1"）;jQuery（this）.hide（）; }}）; }）;}）; }）;};jQuery.fn.backhome = function（） { return this.each（function（） {var raw = this;var width = jQuery（raw）.width（）;jQuery（".ui-active", raw）.each（function（） { jQuery（this）.removeClass（".ui-active"）;}）;jQuery（".ui-gs-main", raw）.animate（{width: "100%"}, 1000）.removeClass（"ui-active"）; jQuery（".ui-gs-panel", raw）.each（function（） { jQuery（this）.animate（{"left": width + "px"}, 1000, function（） {$（this）.hide（）; }）;}）; }）;};</script><style type="text/css">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;}</style><script type="text/javascript">$（document）.ready（function（） { $（"#container"）.grooveshark（）; $（"#backhome"）.click（function（） {$（"#container"）.backhome（）; }）;}）;</script> </head> <body><div id="container"> <div class="ui-gs-main"><ul> <li rel="home">主页</li> <li rel="over_ons">作品</li> <li rel="portfolio">链接</li> <li rel="contact">联系</li></ul> </div> <div class="ui-gs-panel home"><ul> <li>最新更新</li> <li>热点排行</li> <li>时事政治</li> <li>喜欢电影</li> <li>我的音乐</li> <li>我的收藏</li> <li>程序人生</li> <li>娱乐天地</li> <li>婚姻生活</li> <li>五花八门</li></ul> </div> <div class="ui-gs-panel over_ons"><ul> <li>jquery</li> <li>ASP</li> <li>PHP</li> <li>JAVA</li> <li>JSP</li> <li>AJAX</li> <li>ASP.NET</li> <li>VC++</li> <li>C#</li></ul> </div> <div class="ui-gs-panel portfolio"><ul> <li>百度</li> <li>新浪</li> <li>网易</li> <li>腾讯</li> <li>搜狐</li> <li>天涯</li></ul> </div> <div class="ui-gs-panel contact"><ul> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> <li>成都</li> <li>广州</li> <li>常州</li> <li>深圳</li> <li>杭州</li> <li>无锡</li> <li>郑州</li> <li>武汉</li></ul> </div></div></body></html>

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