jQuery を CSS と組み合わせて動的なドロップダウンを作成する menu_jquery

限られたナビゲーション メニュー スペースに大きなサブメニューを配置する必要がある場合、通常はスペース不足を補うためにドロップダウン メニューを使用します。この記事では、jQuery と CSS を使用して、最小限の時間で動的なドロップダウン メニューを作成する方法を説明します。

XHTML
まずはページの先頭部分にjqueryライブラリを導入する必要があります。

<script type="text/javascript" src="js/jquery.js"></script> 

次に、順序なしリストを使用してメニューを作成しました。

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul> 

最初はドロップダウン メニューが閉じているため、この記事ではトリガーとして画像を直接使用します。便利なボタン。そして、その写真をメニューリストの一番上に配置します

<img src="nav.gif" width="184" height="32" class="menu_head" /> 

CSS
メニューの CSS スタイルをそれぞれ作成します。コードを参照してください:

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;} 

.menu li.alt スタイルは、奇数行と偶数行および改行を区別するために使用されることに注意してください。これは、以下の jquery コードに反映されます。
jQuery
jQuery コードでは、まずドロップダウン メニューの行を区別し、偶数行にスタイル alt を与える必要があります。次に、ピクチャーボタンのクリックトリガーイベントを追加すると、ボタンがクリックされたときにドロップダウンメニューが切り替わるようになります。

$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
}); 

注、jQuery の slideToggle メソッドを使ってスライド的にメニューを表示、非表示にしましたが、その効果は非常にスムーズです。

上記は共有 jQuery と CSS を組み合わせて動的なドロップダウン メニューを作成したもので、皆さんの学習に役立つことを願っています。