JQuery は豪華な水平ドロップダウン menu_jquery を実装します

以前は、Web サイトでマウスを上に移動すると、ドロップダウン効果が表示されるのをよく見かけました。JQuery のビデオを見て、実装が非常に簡単であることがわかりました。

HTML では、

タグと
• タグを介して必要な要素を記述します。
  
  コードをコピーします コードは次のとおりです。
  
  ul>
  
• 
  
  
• 🎜> サブメニュー項目 11
  
• ; /a>
  

# ">メニュー項目 2

• 
  サブメニュー項目 21
  < /li>
  
• 
  
  

;/li>

;
サブメニュー項目 31

• 項目 32
  

🎜>
最も外側の

要素
• は、メニュー項目 1、メニュー項目 2、およびメニュー項目 3 です。最も外側のメニューの場合、それぞれのドロップダウン メニューが下にあります。 1 つの階層のメイン メニューを li に配置します。サブメニューがある場合は、このメイン メニューの li に新しい ul を作成し、それを順番にネストして多階層のメニューを構築します。
  
  CSS
  
  
  
  
  コードをコピー
  
  
  コードは次のとおりです:
  
  
  ul, li{
  /*ul と li のドットをクリア*/
  list-style:none;
  }
  ul{

/*サブメニューのインデント値をクリア*/
padding:0;
margin:0;

}

.hmain{ background-image:url(../images/title.gif); Front background-repeat:repeat-x; width:120px; } li{ background-color:#EEEEEE; //背景画像が背景色をカバーします

}

a{
//すべての下線をキャンセルします
text-decoration:none;
padding-left:20px;
display:block; /*ブロックセット要素は領域を埋めることができます*/
表示:インラインブロック;
パディングトップ:3px;
}
.hmain{
色:白;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
}
.hmain li a {
色:黒;
背景画像:なし;
.hmain ul{
表示:なし;
float: left;
margin-right:1px;
}



js ファイル jquery.js が参照されます。 HTML では、menu.js は次のとおりです:




コードをコピー


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


$(document).ready( function(){
//ページ内の DOM がロードされると、実行されたコード
$(".main>a,.hmain a").click( function(){
//メイン メニュー項目に対応するサブメニュー項目が見つかりました
var ulNode=$(this).next("ul");
ulNode.slideToggle(); $(this));
} );
$(".hmain").hover(function(){
$(this).children ("ul").slideToggle();
changeIcon($(this).children( "a"));
},function(){
$(this).children("ul").slideToggle(); (this).children("a") );
})

});
/*
*メイン メニュー インジケーター アイコンを変更します

*/ 関数 changeIcon( mainNode){ if(mainNode) { if(mainNode.css("背景画像").indexOf("collapsed.gif")>=0){ mainNode.css("背景-image","url('images/expanded.gif')"); }else{ mainNode.css("background-image","url('images/collapsed.gif')") ;

}

}
}


この豪華なドロップダウン メニューが完成しました。実装は非常にシンプルですが、内部の知識ポイントは非常に断片的です。例: .main a と .main>a の違いは、前者は .main のこのクラスの要素コンテンツを使用してすべての a ノードを選択するのに対し、後者は .main の子ノードの中からノードのみを選択することです。

このような例は、Web サイトで使用すると、インターフェイスがより美しくなります。3 つだけなので、急いで読み続けてください。