プルダウンとフライアウトの解説

ソースがやたらと複雑なので,解説用のページを別につくりました.複雑になってしまう全ての原因はIE6です.つくっている最中にこいつの中途半端な解釈にどれだけ悩まされたかわかりません.

基本構造について

HTMLマークアップを一部抜粋します.

<ul>
    <li><a href="#nolink">menu1 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="sub1">
                <li><a href="#nolink">menu1-1</a></li>
                <li><a href="#nolink">menu1-2 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub2">
                        <li><a href="#nolink">menu1-2-1</a></li>
                        <li><a href="#nolink">menu1-2-2</a></li>
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>

以上のソースをブラウザに解釈させると以下のような表示になります.

リスト構造を維持する

これに拘らなければpositionプロパティでもなんでも自由に使ってよくなる(あるいはリスト構造を維持する必要すらない)ので格段に楽になりますが,CSSを切った場合になんのことやらわからなくなってしまうという問題があります.そこでリスト構造は維持したまま,CSSで表示を調整するという選択をすることにします.

条件付きコメントでの分岐

IE6ではプルダウン,フライアウトを実現するのに障害となる問題が2つあります.1つはLI要素でラップしたUL要素がそのままでは表示されないという問題.もう1つはA要素以外の:hoverに対応していないという問題です.これをクリアするために第2レベルのUL要素をTABLEを使って囲み,さらにTABLE全体をA要素でラップするという変態的なマークアップをする必要があります.一方で,IE7やFirefoxなどではこのTABLEやAがじゃまになってしまうので,条件付きコメントを利用して分岐させるのがポイントの2つめです.

IE6の場合
UL > LI > A > TABLE > TR > TD > UL > LI
IE6以外(IE7を含む)のブラウザの場合
UL > LI > UL > LI

プルダウン,フライアウトの表現にはvisibilityプロパティを使う

上記のマークアップでclass属性にsub1とsub2を指定しているものがプルダウンもしくはフライアウトで表示される部分です.:hoverを使って上位のLI要素もしくはA要素にマウスが乗ったとき,visibility: visible;になるようにするのがポイントの3つめです.

表示位置の制御

これが一番面倒でわかりにくいのですが,上位のUL要素にはposition: relative;,包含されるUL要素はposition: absolute;で絶対位置指定をすることになります.つまり,上位のUL要素(とLI要素)から見て,下位のUL要素をどの位置に表示させるのかを考えることがポイントの4つめです.

部分ごとの解説

<!-->の意味

<li><a href="#">menu1 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->

このマークアップはIE6でA要素を閉じないようにするためのもの.条件付きコメントの<!--[if gte IE 7]>を使うわけですが,ポイントは<!-->という箇所です.この部分がダブルミーニングになって,</a>がIE7以上であれば解釈され,IE6以下では解釈されないという分岐をさせることが可能になります.

TABLEの利用

下位レベルにあるUL要素の開始直前と終了直後に以下のマークアップがあります.

ULの開始直前
<!--[if lte IE 6]><table><tr><td><![endif]-->
ULの終了直後
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

この2箇所のマークアップによって,IE6ではTABLEの中(正確にはTABLE > TR > TDの中)にUL要素が展開されることになります.

クラス属性のsub1,sub2の意味

これは直前のLI要素を基準にした指定で,上から数えて何番目のLI要素にラップされているULなのかを示します.つまり,sub1であれば1番目のLI,sub2であれば2番目のLIにラップされていることになるわけです.位置指定に使うtopプロパティはLI要素の高さの倍数値になります.

ページ上部のマークアップによるプルダウンとフライアウトの実例

ソースを見比べてもらうとわかりますが(head内),このページのデモのCSSソース,位置指定以外のプロパティのほとんどが共通しています.

サイトトップに戻る

デザイン実験室に戻る