本文实例讲述了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.js jQuery.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> <ul> <li rel="home">主页</li> <li rel="over_ons">作品</li> <li rel="portfolio">链接</li> <li rel="contact">联系</li> </ul> </div> <div> <ul> <li>最新更新</li> <li>热点排行</li> <li>时事政治</li> <li>喜欢电影</li> <li>我的音乐</li> <li>我的收藏</li> <li>程序人生</li> <li>娱乐天地</li> <li>婚姻生活</li> <li>五花八门</li> </ul> </div> <div> <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> <ul> <li>百度</li> <li>新浪</li> <li>网易</li> <li>腾讯</li> <li>搜狐</li> <li>天涯</li> </ul> </div> <div> <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程序设计有所帮助。
【jquery实现像栅栏一样左右滑出式二级菜单效果代码】相关文章：
★ javascript实现dom动态创建省市纵向列表菜单的方法