CSS+JSで作るドロップダウンメニュー
今回はCSSとJavascriptを使って、ドロップダウンメニューを作ります。
CSSのみで作成することも可能ですが、どうもMacIE5.2で動かないのです。。。確かに仕事をしていて、今の対象ブラウザにMacIE5.2が入っているのはどうかと思うところもありますが、まだ使用している人もいるのは事実。。。
私自身、本や他のサイトを参考にさせてもらってますが、なかなか色々なブラウザに対応したものがなくて苦労しました。次に探すのも面倒なので、ここに解説を載せておきます。
なお、今回はこちらのfaLogさんに詳しく解説が載っていました。
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。ドロップダウンとなる部分はli要素の中にul要素を入れ子にする。
HTML
[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>
[/html]
2.CSS部分の各種設定
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;
}
[/css]
3.IE用のJavascriptを用意する
このままだとIEで動いてくれないので、IE用にJavascriptを用意する。
JavaScript
[js]
//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";
}
[/js]
上記のJavascriptは要素やCSSに手を加えた場合、”root_toc”、”plist”、”UL”を変更すれば動くそうです。
CSS+JSで作るドロップダウンメニューのサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。