本文實例講述了jquery實現像柵欄一樣左右滑出式二級菜單效果代碼。分享給大家供大家參考。具體如下：
這里演示了jquery實現像柵欄一樣的左右滑出式二級菜單，會向左或向右滑出，支持中英文，使用時別忘了引入jquery插件。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
