jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼

更新時間：2015年08月24日 17:18:16 作者：企鵝

這篇文章主要介紹了jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼,涉及jquery鼠標click點擊事件及頁面元素動態(tài)操作的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼。分享給大家供大家參考。具體如下：

這里演示了jquery實現(xiàn)像柵欄一樣的左右滑出式二級菜單，會向左或向右滑出，支持中英文，使用時別忘了引入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 class="ui-gs-main">
    <ul>
     <li rel="home">主頁</li>
     <li rel="over_ons">作品</li>
     <li rel="portfolio">鏈接</li>
     <li rel="contact">聯(lián)系</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>網(wǎng)易</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程序設計有所幫助。

您可能感興趣的文章: