jQueryを使ったドロップダウンメニュー

jQueryを使ったドロップダウンメニュー

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

Create a multilevel Dropdown menu
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で作る多階層ドロップダウンメニュー」がとても分かりやすかったです。このブログのカテゴリーメニューのドロップダウンはこちらの記事を参考にしました。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ jQueryプラグイン 素材 引っ越し php お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能