memocarilog

jQueryを使用してマウスを合わせるとスルッと出てくるアニメーションをかけたドロップダウンメニューのチュートリアル”Create a multilevel Dropdown menu with CSS and improve it via jQuery”を参考にサンプルを作ってみました。

CSSでドロップダウンのメニューを作り、親リストのli要素ホバー時に子のリストがjqueryでエフェクトをかけて降りてくるようになっています。CSSのコードはチュートリアルの方で作り方がのっています。

作ってみたサンプルデモ

サンプルデモ

作ってみたdemoのjQueryのスクリプトの部分です。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function mainmenu(){
$(" 子カテゴリー ul要素 ").css({display: "none"}); // Opera Fix
$(" 親カテゴリー li要素 ").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}
 
 $(document).ready(function(){					
	mainmenu();
});
</script>

jQueryの使い方は違いますがドロップダウンメニューの作り方は、こちらの記事「jQueryで作る多階層ドロップダウンメニュー」がとても分かりやすかったです。このブログのカテゴリーメニューのドロップダウンはこちらの記事を参考にしました。