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