JQuery は豪華な水平ドロップダウン menu_jquery を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:08 PM

jquery

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

タグを介して必要な要素を記述します。

コードをコピーしますコードは次のとおりです。

ul>
🎜> サブメニュー項目 11
; /a>
# ">メニュー項目 2

サブメニュー項目 21

- 項目 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 つだけなので、急いで読み続けてください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。