jQueryでドロップダウンメニューの実装をします。
下の写真が、完成写真です。
まず、HTMLは以下のようなコードにします。また、<body>内だけ表示しています。
<div id="wrapper"> <header> <h1>Dropdown Menu</h1> </header> <nav> <ul id="navi"> <li><a href="#">Menu1</a> <ul> <li><a href="#">Menu1a</a></li> <li><a href="#">Menu1b</a></li> <li><a href="#">Menu1c</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">Menu2a</a></li> <li><a href="#">Menu2b</a></li> <li><a href="#">Menu2c</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul> <li><a href="#">Menu3a</a></li> <li><a href="#">Menu3b</a></li> <li><a href="#">Menu3c</a></li> </ul> </li> <li><a href="#">Menu4</a> <ul> <li><a href="#">Menu4a</a></li> <li><a href="#">Menu4b</a></li> <li><a href="#">Menu4c</a></li> </ul> </li> </ul> </nav> <main> <!-- メインコンテンツ --> </main> </div>
CSSは下のようなコードです。また、主な部分のCSSだけ表示しています。
ul ul { display: none; position: absolute; width: 250px; }
次に、jQueryを記述していきます。
以下のようなコードです。
$(function(){ $("#navi").children("li").hover(function(){ $(this).children("ul").stop().slideToggle(100); }); });
２行目で、idがnaviの子要素のliタグをhoverした時の処理を記述していきます。
３行目で、idがnaviの子要素のulタグをスライドして表示します。今回は、スライドのスピードを100ミリ秒に設定しています。また、stop()でアニメーションの重複を防ぎます。
以上のコードで、ドロップダウンメニューは完成です。
