CSS+JSで作るドロップダウンメニュー
今回はCSSとJavascriptを使って、ドロップダウンメニューを作ります。
CSSのみで作成することも可能ですが、どうもMacIE5.2で動かないのです。。。確かに仕事をしていて、今の対象ブラウザにMacIE5.2が入っているのはどうかと思うところもありますが、まだ使用している人もいるのは事実。。。
私自身、本や他のサイトを参考にさせてもらってますが、なかなか色々なブラウザに対応したものがなくて苦労しました。次に探すのも面倒なので、ここに解説を載せておきます。
なお、今回はこちらのfaLogさんに詳しく解説が載っていました。
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。ドロップダウンとなる部分はli要素の中にul要素を入れ子にする。
HTML
<div id="navi"> <ul id="root_toc"> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a> <ul> <li><a href="#">マーケティングサービス</a></li> <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></li> </ul> </div>
2.CSS部分の各種設定
CSS
/* ナビ設定 */ #navi { width: 600px; /*メニューの横幅*/ } #navi ul,#navi li { list-style:none; /*リストスタイルはなし*/ margin:0; padding:0; } #root_toc li,#root_toc li a { width: 150px; /*各メニューの横幅*/ background-image:url(images/drop_bg.gif); /*背景画像の設定*/ height: 20px; font-weight:bold; } #root_toc li{ float:left; /* メニューを横並びにする */ border-bottom:1px solid #FFF; } #root_toc li.plist ul { display:none; /* ドロップダウン部分を見えなくする(通常時) */ position:absolute; } #root_toc li.plist:hover ul { display: block; /* メニュー部分をブロック要素にする */ } #root_toc li.plist li { float:none; /* ドロップダウン部分をfloatを効かせない(多分。。。) */ } #root_toc li a {/*boxの扱いの差が出るのでpaddingは使わない*/ display: block; line-height:1.5; text-indent: 5px; color:#fff; background-color: #666; text-decoration:none; } #root_toc li a:hover { color:#FFF; background:url(images/drop_bg.gif) right top; }
3.IE用のJavascriptを用意する
このままだとIEで動いてくれないので、IE用にJavascriptを用意する。
JavaScript
//window.onload = function(){//<head>にスクリプトを配置する場合は行先頭のコメントアウトを外す if(document.getElementById && document.all && !navigator.userAgent.match(/Opera/)){ var obj = document.getElementById("root_toc"); for(var i=0;i<obj.childNodes.length;i++) { if(obj.childNodes[i].className=="plist") { obj.childNodes[i].onmouseover = function(){pull(this)}; obj.childNodes[i].onmouseout = function(){pull(this)}; } } } //}//<head>にスクリプトを配置する場合は行先頭のコメントアウトを外す function pull(obj){ for(var i=0;i<obj.childNodes.length;i++) if(obj.childNodes[i].nodeName.toUpperCase()=="UL") obj.childNodes[i].style.display=obj.childNodes[i].style.display=="block"?"none":"block"; }
上記のJavascriptは要素やCSSに手を加えた場合、”root_toc”、”plist”、”UL”を変更すれば動くそうです。
CSS+JSで作るドロップダウンメニューのサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。