Lucky bag::blog: CSSだけでドロップダウンメニュー

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS

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

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

リストを横に並べる

元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の margin と padding を 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;
}

サンプル（完成　IE未対応）

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

2005-03-07T15:21:17+09:00 | コメント (2) | トラックバック (0) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/172

"CSSだけでドロップダウンメニュー"へのトラックバックはまだありません。

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

e-luck さんからのコメント: なるほどー、確かに強引ですね:-D
マークアップとしては微妙ですけど、ちょっと試してみようかな。
情報、ありがとうございました。; 2005年06月06日 12:08

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog