99%CSSで作るプルダウンメニュー１

今回は99％CSSでつくるプルダウンメニューを紹介します。
普通プルダウンはjavascriptメインで作るものですが、今回は限界まで使用を抑えています。 CSSの一つの到達点といえるでしょう。

＊2005.8.6追記＊
実際に導入を考えている方はCSSプルダウン for カスタマイズ を利用することをおすすめします。

テクニック使用後

やり方

HTMLはこんな感じになります。

<DIV id="menu">
<ul class="main">
<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">
<A href="./csstec-top.html">トップ</A>
　<ol class="sub">
　<li><A href="./csstec-top.html">あああああああ</A></li>
　<li><A href="../index.html">いいい</A></li>
　</ol>
</li>

<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">
<A href="./csstec-top.html">インフォ</A>
　<ol class="sub">
　<li><A href="./csstec-top.html">ううう</A></li>
　<li><A href="../index.html">えええ</A></li>
　<li><A href="../index.html">おおお</A></li>
　</ol>
</li>

<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">
<A href="./csstec-top.html">メイン</A>
　<ol class="sub">
　<li><A href="./csstec-top.html">かかか</A></li>
　<li><A href="../index.html">ききき</A></li>
　<li><A href="../index.html">くくく</A></li>
　<li><A href="../index.html">けけけ</A></li>
　</ol>
</li>
</ul>
</DIV>

DIV：menuは配置場所などを取り扱いしやすくするためのボックスです。

ulとli class="off"がメインメニューを構成しています。liを増やせばメニューはいくらでも増やせます。

ol部分がサブメニューを構成しています。olを使ったのはソースの可読性を上げるためなので、別にulでもかまいません。 liを増やせばいくらでも項目を追加できます。

onmouseover="this.className='on'" onmouseout="this.className='off'"の部分だけが唯一使用しているjavascriptです。 これを使ってカーソルが合わさったときだけclass名を書き換えています。
:hoverが効かないタグに対して同じような効果を発揮させているものと考えて下さい。

スタイルシートはこんな感じになります。量は多めです。

/****全体位置の決定****/
DIV#menu{
    position:absolute;/*△*/
    width:100%;/*○*/
    z-index:100;/*△*/
    font-size:14px;/*△*/
}
/****メインメニュー用スタイル****/
ul.main{
    margin:0px;/*△*/
    padding:0px;/*△*/
    width:100%;/*○*/
    position:relative;/*×*/
    list-style:none;/*△*/
    text-align:center;/*○*/
}
/*通常時*/
.main li.off{
    position:relative;/*×*/
    float:left;/*×*/
    height:1em;/*○*/
    width:100px;/*○*/
    overflow:hidden;/*×*/
    border:1px solid #993300;/*○*/
    background-color:#FFFFFF;/*○*/
}
/*展開時*/
.main li.on{
    float:left;/*×*/
    overflow:hidden;/*×*/
    width:100px;/*○*/
    background-color:#FFFFD5;/*○*/
    border:1px solid #993300;/*○*/
}
.main>li.on{
overflow:visible;/*×*/
}
/*リンクスタイル*/
.main a{
    display:block;/*△*/
    text-decoration:none;/*○*/
}
.main a:hover{
    background-color:#FFFFD5;/*○*/
}

/****サブメニュー用スタイル****/
ol.sub{
    margin:0px;/*△*/
    padding:0px;/*△*/
    position:relative;/*×*/
    left:0.5em;/*○*/
    top:0.5em;/*○*/
    width:120px;/*○*/
    border:1px solid #993300;/*○*/
    border-bottom:0px solid #993300;/*○*/
    background-color:#FFCCCC;/*○*/
    list-style:none;/*△*/
    text-align:left;/*○*/
}
.sub li{
/*必要に応じて追加*/
}
.sub a{
    padding:2px 0px 2px 5px;/*○*/
    display:block;/*△*/
    width:115px;/*○*/
    border-bottom:1px solid #993300;/*○*/
}
.sub a:hover{
    background-color:#FFFFEC;/*○*/
}

かなりデリケートな構造で、ここがこう働いているから、こうなるんだよ。 という説明はちょっと難しいです。

ポイントは.main li.offと.main li.onで、.main li.onに高さを指定しないことで、 liの高さが自動調節され、li.offではoverflow:hiddenで隠されていた部分が見えるようなった。 というのが基本的な構造です。ただ、その他もろもろの要素が複雑に絡んでいます。

理由は分かりませんがli.onにposition:relativeを設定すると、失敗します。

各プロパティの横に入れたコメントは変更の可否を表しています。 ○は変更可、△は変更非推奨、×は変更不可を表しています。 改造する際の一つの目安にしてください。

デリケートな構造なので、フォントサイズはpxで固定することをおすすめします。

---

使いこなすための＋α

背景画像を使用したり、ロールオーバーリンクと組み合わせることで、可能性は無限に広がります。

javascriptは使用していないに等しいので、CSSが分かる人なら容易に改造できるのが特徴です。 しかしjavascriptをoffにされると動作しないので気をつけて下さい。(メインメニューは有効です。)

ブラウザーが進化してli:hoverが効くようになれば100％CSSのプルダウンを作ることも可能です。 firefoxでは出来るので試してみてはいかがでしょうか？

動作保障はIE6以上、Opera7以上、firefoxのみです。他はどうなってるか知りません。 使うときはそこんとこよろしくです。

---