jQuery實作可用於部落格的動態滑動選單_jquery

本文實例講述了jQuery實作可用於部落格的動態滑動選單的方法。分享給大家供大家參考。具體如下：

複製程式碼 程式碼如下:

腳本>

    （函數（$）{
 $.fn.extend({
     tagdrop: 函數（選項）{
  var 預設值 = {
      tagPaddingTop: '90px',
      tagDefaultPaddingTop: '30px',
      bgColor: '#B1CCED',
      bgMoverColor: '#7FB0F0',
      文字顏色：'#e0e0e0'，
      文字預設顏色：'#fff'
  };
  var options = $.extend(defaults, options);
  返回 this.each(function() {
      var obj = $(this);
      var li_items = $("li", obj);
      $("li", obj).css('背景顏色', options.bgColor);
      li_items.mouseover(function(){
   $(this).animate({paddingTop: options.tagPaddingTop}, 300);
   $(this).css('背景顏色', options.bgMoverColor);
   $(this).css('color', options.textColor);
      }).mouseout(function() {
   $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);
   $("li",$(this).parent()).css('background-color', options.bgColor);
   $("li",$(this).parent()).css('color', options.textDefaultColor);
      });
  });
     }
 });
    })(jQuery);
腳本>

    $(文檔).ready(function() {
 $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});
    });
腳本>

    身體{
 邊距：0；
 填充：0；
    }
    #nav li {邊距：0;填入：0；顯示：內嵌；列表樣式類型：無；字體大小：12px；}
    #nav a:鏈接，#nav a:訪問過{
    }
    #nav a：懸停{顏色：#fff;  背景：#FF6A00;}
    #nav a:visited.active, #nav a:link.active {背景顏色：#fff;顏色：#FF6A00;}
    .選單{
 列表樣式：無；
 邊距：0；
 浮動：右；
    }
    .menu li {
 浮動：左；
 邊距：0 自動；
 遊標：指針；
 高度：30px；
 內邊距：30px 5px 5px 5px;
 邊距：0px 3px 0px 3px;
 -moz-邊框半徑：0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 顏色：#FFF；
 文字陰影：0 -1px 1px rgba(0,0,0,0.25);
 字體系列：「Lucida Grande」、Lucida、Verdana、sans-serif；
 字體大小：13px;
 字體粗細：粗體；
 文字轉換：大寫；
    }
風格>
    頭>
   
       

           
• 關於我們

           
• 聯絡人

           
• 其他

           
• 產品

   
• 投資組合

   
• 見證

       

    身體>

希望本文對大家介紹的 jQuery 程式設計有所幫助。