jquery_jqueryを使用して無限階層水平ナビゲーションメニューを実装する方法

この記事の例では、jquery が無限階層の水平ナビゲーション メニューを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

1. jquery プラグインのバージョン コードは次のとおりです:

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

(function($){
$.fn.extend({
droplinemenu: function(configs) {
var configs = $.extend({ 超: 200、
アウト: 100、
rightdown:'css/down.gif'
},configs||{});
This.find(">ul").addClass("dropmenu");
this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("");
var currentobj;
return $('li.hasmenu').hover(function(){ if（$ .browser.msie）{// IE：hidden
で生成されたオーバーフローをクリアします $(this).parent("ul").css({'overflow': 'visible'});                                                                                                       $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
}、関数（）{ $(this).find(">ul").stop(true, true).slideUp(configs.out);
});
}
});
})(jQuery);

2. スタイルコード

コードをコピー

コードは次のとおりです:* {margin:0;padding:0} .droplinebar{ 位置: 絶対; z インデックス: 20;

幅: 700px;

}
.droplinebar ul.dropmenu {
位置: 相対;
}
.droplinebar ul{
幅: 100%; フロート: 左
フォント: 太字 13px Arial;
背景: #242c54 url​​(bluedefault.gif) center centerrepeat-x; /*メニューバーのデフォルトの背景*/
}
.droplinebar ul li{
フロート:左
}
.droplinebar ul ul {
幅: 700px;
表示:なし;
z インデックス: 100;
位置:絶対;
左:0; 背景: #303c76; ズーム: 1;
}
.droplinebar ul li a{
float: 左;
色: ホワイト;
パディング: 9px 11px;
テキスト装飾: なし;
表示:ブロック
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*マウスオーバー時のメイン メニュー バーのリンクの背景*/
色: 白;
背景: 透明 URL(blueactive.gif) center centerrepeat-x;
}
/* サブレベルのメニューリンクのスタイル */
.droplinebar ul li ul li a{
フォント: 通常の 13px Verdana;
パディング: 6px;
パディング右: 8px;
マージン: 0;
border-bottom: 1px ソリッドネイビー;
}
.droplinebar ul li ul li a:hover{ /*サブメニューリンクの背景色 onMouseover */
背景: #242c54;
}

3. HTML代码如下

复制代幣代码如下:

;


<スクリプトタイプ="text/javascript">
$(document).ready(function(){
    $("#mydroplinemenu").droplinemenu();
});

• ホーム


• CSS の例
   
  
   
  • アクティビティ 1
  
   
  • アクティビティ 2
  
   
  • アクティビティ 3
         
    
         
    • ウォーター スポーツ 1
    
         
    • ウォーター スポーツ 1
    
         
    • ウォーター スポーツ 1
    
         
    • ウォーター スポーツ 1
    
         
    
       
  
   
  • アクティビティ 4
  
   
  
  


• ツール


• JavaScript
   
  
   
  • 旅行 1
  
   
  • 旅行 2
  
   
  • 旅行 3
  
   
  • 旅行 4
         
    
         
    • アフリカ 1
    
         
    • アフリカ 2
    
         
    • アフリカ 3
    
         
    • アフリカ 4
               
      
               
      • ケニア 1
      
               
      • ケニア 2
      
               
      • ケニア 3
      
               
      • ケニア 4
      
               
      • ケニア 5
      
               
      
             
    
         
    
       
  
   
  • 旅行 5
  
   
  
  


• ギャラリー

4. プラグインのバージョン コードなし:

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

$(document).ready(function(){
var configs_over = 200,configs_out = 100;
$("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a" ).append("");
$('.dropmenu li.hasmenu').hover(function(){ If ($.browser.msie) {//IE:hidden
で生成されたオーバーフローをクリアします $(this).parent("ul").css({'overflow': 'visible'}); }
$(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
},function(){
$(this).find(">ul").stop(true, true).slideUp(configs_out);
});
});

この記事が皆さんの jQuery プログラミングに役立つことを願っています。