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

JavaScript

このあいだ『ドロップダウンメニューを実現するjQueryのスクリプト』という記事を書きましたが、JavaScriptオフの環境に対して全く対応していませんでした。。。ということで作り直しました。JavaScriptオフの時にはCSSでドロップダウンメニューに対応するってヤツです。IE6以外は・・・。

Demo

必要なファイル

コーディング＆設定

HTML

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

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

IE6ではa要素以外に:hover擬似クラスを使用できず、min-widthプロパティも効かないので、HTMLヘッダー内に以下のスクリプトを読み込んで対応する。

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

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

CSS

以下のCSSを記述。

ul#dropdownmenu {
	width: 100%;
	*zoom: 1; /*forIE6,7*/
}
ul#dropdownmenu:after {
	content: "";
	display: block;
	clear: both;
}
ul#dropdownmenu li {
	width: 100px;
	float: left;
	*zoom: 1; /*forIE6,7*/
	white-space: nowrap;
}
ul#dropdownmenu li ul {
	visibility: hidden;
	position: absolute;
}
ul#dropdownmenu li:hover > ul {
	visibility: visible;
}
ul#dropdownmenu li ul li {
	width: auto !important;
	width: 100px;
	min-width: 100px;
	clear: left;
	position: relative;
}
ul#dropdownmenu li ul li ul {
	top: 0;
	left: 100%;
}
ul#dropdownmenu li a {
	display: block;
	background-color: #333;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
* html ul#dropdownmenu li a { /*forIE6*/
	zoom: 1;
}
ul#dropdownmenu li a:hover {
	background-color: #666;
}
ul#dropdownmenu li ul li a {
	text-align: left;
}

※ 上記CSSの記述を変更しました。

JavaScript

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

$(function(){

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

//初期表示設定
	$("#dropdownmenu li ul").css("display","none");

//ホバーイベント
	$("#dropdownmenu li").hover(
		function(){
			$(">ul:not(:animated)",this).css("visibility","visible").fadeIn(Speed);
			$(">ul >li:not(:animated)",this).css("display","none").slideDown(Speed);
			$(">ul >li ul",this).css("visibility","hidden");
		},
		function(){
			$(">ul",this).fadeOut(Speed,function(){
				$("ul",this).css("visibility","hidden");
			});
			$(">ul >li",this).slideUp(Speed);
		}
	);

});

参考サイト

あとがき

JavaScriptを使用することで、リッチコンテンツやユーザビリティを高めたサイトを制作することがきます。しかし、JavaScriptをオフにした環境でも最低限のユーザビリティを保つことが出来なければ、そういった環境のユーザーにとって粗悪なサイトと化してしまうかもしれません。なんて偉そうなことを書いている私が犯したミスではありますがね。悪い見本としてくれれば幸いです。

Top