ホームページ > 記事 > ウェブフロントエンド > JQuery は豪華な水平ドロップダウン menu_jquery を実装します
JQuery は豪華な水平ドロップダウン menu_jquery を実装します
- WBOYオリジナル
- 2016-05-16 17:08:171590ブラウズ
以前は、Web サイトでマウスを上に移動すると、ドロップダウン効果が表示されるのをよく見かけました。JQuery のビデオを見て、実装が非常に簡単であることがわかりました。 
HTML では、
- タグと
- タグを介して必要な要素を記述します。
コードをコピーします コードは次のとおりです。/*サブメニューのインデント値をクリア*/
ul>
- 🎜> サブメニュー項目 11
- ; /a>
- # ">メニュー項目 2
-
サブメニュー項目 21
< /li>
- ;
- 項目 32
サブメニュー項目 31
🎜>
最も外側の- 要素
- は、メニュー項目 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 つだけなので、急いで読み続けてください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。