CSSだけでドロップダウンメニュー

ナビゲーションのドロップダウンメニューは、JavaScript を使って実現出来ますが、スクリプトをオフにしてブラウジングしている人も居たりするんで、それを CSS だけでやってみた。今、チョロッとやってみただけなんで、微妙な感じかもしれませんが。(しかも、全然クロスブラウザじゃないし...)

やり方としてはいくつかあると思うんですが、今回はサブメニューの表示・非表示をコントロールするために、疑似クラスの hover プロパティを リスト要素に使っています。なんで、hover プロパティをアンカー要素以外に適用出来ない IE なんかでは表示されないんで、あまり使えないかも:-P

リストを横に並べる

元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の marginpadding を 0 にしています。

今回は、ナビゲーションを横に並べた状態のモノを作成するので、トップメニュー( id="menu" )のリスト要素を float で横に並べます。後述しますが、リンク要素をブロック化するので、 display: inline; は使いません。

#menu li {
        float:left;
        list-style-type: none;
        text-align: center;
        background-color: #fff;
}

このままでは、サブメニュー( class="sub" )も横に並んでしまうので、フロートを解除します。

#menu .sub li {
        clear: left;
}

忘れずに、ナビゲーション以降の要素(今回サンプルでは h3 )にも clear: left;を。

リンク要素をブロック化

メニューのクリック領域をボタンのようにするために、アンカー要素を display プロパティでブロック化します。

#menu li a {
        display: block;
        width: 8em;
        height: 2em;
        line-height: 2em;
        text-decoration: none;
        border: 1px solid #ccc;
}

ちょっと補足すると、line-height: 2em; とすることで、ブロック化したリンク要素の文字を縦の中央に配置する事ができます。vertical-align: middle; のような振る舞いが便利で、結構重宝してる方法です。更にマウスオーバー時の色の指定を hover で指定します。

サブメニューの表示・非表示

まず、サブメニュー( class="sub" )のサブメニューを非表示にします。

.sub {
        display: none;
}

次に、トップメニュー( id="menu" )にマウスオーバーした時に、非表示にしてあるサブメニュー( class="sub" )をブロック化して表示させる指定をして完了です。

#menu li:hover .sub {
        display: block;
        position: absolute;
}

ポイントは、position: absolute; とする事で、サブメニュー( class="sub" )をナビゲーション以降の見出しと本文の上に表示させる事でしょうか。これを指定しないと、サブメニュー表示時に下の見出しと本文がサブメニューの分だけ下にガクっと下がってしまいます。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/217

Comments

s2k said:

IEでhoverなどの擬似クラスがa以外で使えないのは正直痛いですよね。早く対応して欲しいものです。。。
ところで、ドロップダウンメニューをIE、且つCSSのみで実現する方法が全く無いわけではありません。但し、かなり強引な方法です。
aをブロック化して配置します。aタグ内は見出しのテキストと、改行をはさんで、ドロップダウン時に現れる画像(イメージマップで画像内にリンクを作成)を入れておきます。あとはaタグの高さを指定してoverflowをhiddenにし(画像を非表示化)、hoverでdisplayに変更することで、ポインタが乗るとブロックが伸びて隠れていた画像が現れ、そのイメージマップで別のページに飛ぶことができます。
もちろん、問題点はイメージマップという反則技、そしてその副作用か、イメージマップのリンクはポイントしてもステータスバーにURLが表示されません。最大の問題点は、Netscape(8.0.1)やOpera(8.0)では使えないことです。うまくすれば解決できるかもしれませんが…

e-luck said:

なるほどー、確かに強引ですね:-D
マークアップとしては微妙ですけど、ちょっと試してみようかな。
情報、ありがとうございました。