jQuery は、blogs_jquery で使用できる動的なスライド メニューを実装します。

この記事の例では、ブログに使用できる動的なスライド メニューを jQuery で実装する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
    (関数($){
 $.fn.extend({
     タグドロップ: 関数(オプション) {
  var のデフォルト = {
      tagPaddingTop: '90px',
      tagDefaultPaddingTop: '30px',
      bgColor: '#B1CCED',
      bgMoverColor: '#7FB0F0',
      textColor: '#e0e0e0',
      textDefaultColor: '#fff'
  };
  var options = $.extend(defaults, options);
  return 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('背景色', options.bgColor);
   $("li",$(this).parent()).css('color', options.textDefaultColor);
      });
  });
     }
 });
    })(jQuery);

<スクリプトタイプ="text/javascript">
    $(document).ready(function() {
 $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});
    });

<スタイル>
    ボディ{
 マージン:0;
 パディング:0;
    }
    #nav li {マージン: 0;パディング: 0;表示: インライン;リストスタイルタイプ: なし;フォントサイズ: 12px;}
    #nav a:リンク、#nav a:visited {
    }
    #nav a:hover {color: #fff;  背景:#FF6A00;}
    #nav a:visited.active、#nav a:link.active {背景色: #fff;色: #FF6A00;}
    .menu {
 リストスタイル:なし;
 マージン: 0;
 float:right;
    }
    .menu li {
 float:left;
 マージン:0 自動;
 カーソル:ポインタ;
 高さ:30px;
 パディング:30px 5px 5px 5px;
 マージン:0px 3px 0px 3px;
 -moz-border-radius: 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;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 フォントファミリー: "Lucida Grande"、Lucida、Verdana、サンセリフ;
 フォントサイズ:13px;
 フォントの太さ:太字;
 テキスト変換:大文字;
    }

   
   
       

           
• 私たちについて

           
• 連絡先

           
• その他

           
• 製品

   
• ポートフォリオ

   
• 証言

       

   

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。