ドロップダウンメニューを実現するjQueryのスクリプト

JavaScript

jQueryは本当に素晴らしいと毎日の様に思いつつドロップダウンメニューなど作ってみました。本当なら自動で高さや幅を読み取って動くようにしたかったんですが、どうもうまくいきませんでした。おかげで過度のフォントサイズ変更には耐えられ無いですが。。。だってIEが・・・。まーそれでも十分実用には耐えられる様にしたつもりです。

Demo

※改修したものを公開していますのでよろしければドロップダウンメニューを実現するjQueryのスクリプト改をご覧下さい。

必要なファイル

コーディング＆設定

HTML

HTMLヘッダー内でjquery.jsを読み込む。

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

以下の様にul#dropdownmenu内にリストの入れ子をつくる。入れ子の数に制限はない。

<ul id="dropdownmenu">
	<li>テキスト<ul>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
	</ul></li>
	<li>テキスト<ul>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
	</ul></li>
	<li>テキスト<ul>
		<li>テキスト<ul>
			<li><a href="#">テキスト</a></li>
			<li><a href="#">テキスト</a></li>
		</ul></li>
		<li>テキスト<ul>
			<li><a href="#">テキスト</a></li>
			<li><a href="#">テキスト</a></li>
		</ul></li>
	</ul></li>
</ul>

CSS

以下のCSSを記述。簡単な変更程度でしたら問題なく動作すると思います。

ul#dropdownmenu {
	*zoom: 1; /*forIE6,7*/
}
ul#dropdownmenu:after {
	content: "";
	display: block;
	clear: both;
}
ul#dropdownmenu li {
	width: 79px; /*リストの幅*/
	background-color: #333; /*背景色*/
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 10px 10px 0;
	float: left;
	position: relative;
	color: #fff; /*文字色*/
	text-align: center;
}
ul#dropdownmenu li.listHeight {
	height: 26px; /*第1階層のリストの高さ*/
}
ul#dropdownmenu li ul {
	width: 100px;
}
ul#dropdownmenu li ul.secondList {
	position: absolute;
	top: 37px; /*第1階層のリストの高さを変更した場合は合わせて変更*/
	left: 0;
}
ul#dropdownmenu li ul.lowList {
	position: absolute;
	top: 0;
	left: 100px; /*リストの幅を変更した場合は合わせ変更*/
}
ul#dropdownmenu li ul li {
	height: auto;
	padding: 10px;
	float: none;
}
ul#dropdownmenu li ul li a {
	display: block;
	*zoom: 1; /*forIE6,7*/
	color: #fff; /*テキストリンクの文字色*/
	text-decoration: none;
}
ul#dropdownmenu li ul li a:hover {
	color: #0b9; /*テキストリンクのホバー時の文字色*/
}

JavaScript

以下のスクリプトを記述。

$(function(){

//アニメーション速度設定
	var Speed = "300";

//対象要素設定
	var DropdownMenu = "#dropdownmenu";

//display確認関数
	function DisplayChack(val){
		return $(">ul",this).css("display",val);
	};

//ホバー関数
	function HoverEvent(obj){
		$(obj).hover(
		function(){
			if(DisplayChack("none")){
				$(">ul:not(:animated)",this).fadeIn(Speed);
				$(">ul >li:not(:animated)",this).slideDown(Speed);
			};
		},
		function(){
			if(DisplayChack("block")){
				$(">ul",this).fadeOut(Speed);
				$(">ul >li",this).slideUp(Speed);
			};
		});
	};

//第1階層リストclass設定
	$(">li",DropdownMenu).addClass("listHeight");

//第2階層以下リストclass設定
	$(">li >ul",DropdownMenu).addClass("secondList").css("display","none");
	$("li ul li",DropdownMenu).css("display","none");

//第3階層以下リストclass設定
	$("li ul li ul",DropdownMenu).addClass("lowList");

//第2階層リストホバーイベント
	HoverEvent("#dropdownmenu >li");

//第3階層以下リストホバーイベント
	HoverEvent("#dropdownmenu li ul li");

});

あとがき

このスクリプトを書くだけでも相当時間がかかってしまいました。これでも自分の思い通りに出来たわけではないんですが。日々精進ですね。

Top