ドロップダウンメニューを実現するjQueryのスクリプト改
このあいだ『ドロップダウンメニューを実現するjQueryのスクリプト』という記事を書きましたが、JavaScriptオフの環境に対して全く対応していませんでした。。。ということで作り直しました。JavaScriptオフの時にはCSSでドロップダウンメニューに対応するってヤツです。IE6以外は・・・。
必要なファイル
コーディング&設定
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をオフにした環境でも最低限のユーザビリティを保つことが出来なければ、そういった環境のユーザーにとって粗悪なサイトと化してしまうかもしれません。なんて偉そうなことを書いている私が犯したミスではありますがね。悪い見本としてくれれば幸いです。