制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさみみを着けたオリジナルキャラクタ。次ぎ アイドル女優・堀北真希ちゃんにうさぎの耳を着けた制作者のオリジナルキャラクタ
主な作品

アイドルをモデルにした制作者の創作キャラクタを用いたイラストの一例とそれを組み込んだアニメーション動画

CSSだけで実現するポップアップメニュー(旧版)。

CSSの小技として、普段は隠れているけどマウスカーソルを合わせると表示されるメニューを実現する方法です。

CSSだけで実現するポップアップメニュー(旧版)・目次。

CSSだけで実現するポップアップメニューの概要。

CSSには:hover擬似クラスなどが定義されており、これに依りマウスカーソルを合わせる事で表示/非表示を切り替える事が出来ます。

残念な事に、

では正常な動作は期待出来ないようですので、IEは7.0以降、ファイヤーフォックスは3.0以降と言う事にしましょう。

CSSだけで実現するポップアップメニューのサンプル。

試しに、PC環境の

などでご覧の方は、以下の実験サイトにアクセスしてみてください。

実際のマークアップとスタイル定義。

それでは、実際にHTMLでのマークアップと、CSSでのスタイル定義を見てみましょう。

ポップアップメニューのHTMLでのマークアップ。

まず、ポップアップメニューを成すHTMLのマークアップは以下のようになります。

<ul id="MENU_NAVI">
    <li>
        <p><a href="…">一列目のアンカー</a></p>
        <ul>
            <li><a href="…">一列目一行目</a></li>
            <li><a href="…">一列目二行目</a></li>
            …
            </ul>
        </li>

    <li>
        <p><a href="…">二列目のアンカー</a></p>
        <ul>
            <li><a href="…">二列目一行目</a></li>
            <li><a href="…">二列目二行目</a></li>
            …
            </ul>
        </ll>
    …
    </ul>

ポップアップメニューのHTMLでのマークアップの解説。

本当は定義リストにしたかったのですが、そうするとCSSの適用が巧く行かないので、このように箇条書きを二重にする形としております。

ポップアップメニューの本体である、<ul id="MENU_NAVI"> 要素は、HTMLの記述を考えると本文より後、フッタより前になると考えられます。

勿論、冒頭にメニューを書いても構わないのですが(その場合には直前に本文にスキップ出来るアンカーを設けておきましょう)、表示はCSSのポジショニングで対応する事としますので、問題はありません。

また、<ul id="MENU_NAVI"> 要素直下の <li>要素は各列の内容となります。

その中で、一番目の <p>要素が常に表示されるべき項目となります。

この <p>要素内のアンカーをポイントすると、二番目の <ul>要素の内容が表示されるようになるという訳です。

ポップアップメニューを実現するCSSでのスタイル定義。

それでは、実際にこのHTMLがポップアップメニューとして機能するようにCSSを書いてみましょう。

/* メニューバー */
ul#MENU_NAVI {
    position: absolute;
    top: 5em;
    left: 0;
    width: 100%;
    background: #040;
    color: #fff;
    font-size: 80%;
    margin: 0 0 0;
    padding: 0;
    height: 2em;    /* 重要 */
    text-align: center;
    white-space: nowrap;
    }

/* メニューバー内の各列 */
ul#MENU_NAVI li {
    display: inline-block;
    width: 10em;
    vertical-align: top;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

/* メニューバー内の各列の見出しアンカー */
ul#MENU_NAVI li p {
    margin: 0;
    padding: 0.25em 0;    /* 重要 */
    height: 1.5em;    /* 重要 */
    }

/* メニューバー内の各列の見出しアンカーのスタイル */
ul#MENU_NAVI li p a:link,
ul#MENU_NAVI li p a:visited {
    padding: 0;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

/* 各列のポップアップされるメニュー部分のスタイル */
ul#MENU_NAVI li ul {
    display: none;
    background: transparent;
    margin: 0;
    padding: 0 0 2em;
    white-space: normal;
    text-align: left;
    }

ul#MENU_NAVI li ul li {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #fff;
    }

ul#MENU_NAVI li ul li a:link,
ul#MENU_NAVI li ul li a:visited {
    display: block;
    margin: -1px 0 0;
    padding: 0.1em 0.2em;
    border: 1px solid #000;
    white-space: normal;
    color: #000;
    text-decoration: none;
    }

/* ポップアップ時のスタイル */
ul#MENU_NAVI li p:hover+ul,
ul#MENU_NAVI li ul:hover {
    display: block;
    }

/* IE 7 */
*+html ul#MENU_NAVI li {
    display: inline;
    position: relative;
    left: 0;
    top: 0;
    }

*+html ul#MENU_NAVI ul {
    position: absolute;
    top: 0;
    left: 0;
    margin: 2em 0 0;
    }

/* IE 6 */
* html ul#MENU_NAVI li {
    display: inline;
    }

* html ul#MENU_NAVI ul {
    display: none;
    }

ポップアップメニューを実現するスタイル定義の解説。

このスタイルのからくりですが、以下のようになります。

  1. 先ず、ポップアップするメニューバーとなる、<ul id="MENU_NAVI"> 要素セレクタについて、背景色などを指定して表示させたい位置にポジショニングします。

    ここで大事なのは、バーの高さをしっかり決めておく事(heightプロパティ)。高さが曖昧だと、綺麗に表示されなかったり巧くポップアップメニューが機能しない事になります。

  2. 各列は <ul id="MENU_NAVI"> 要素直下の <li>要素となり、これらはインラインブロックで表示されるようにします(display: inline-block;プロパティ)。

  3. 各列の見出しアンカー(常に表示されるべきアンカー)は <ul id="MENU_NAVI"> 要素直下の <li>要素の一番目の子要素である<p>要素となり、これについては固有のスタイルを決めておきます。

  4. 各列のポップアップされるメニュー部分は <ul id="MENU_NAVI"> 要素直下の <li>要素の二番目の子要素である<ul>要素となります。

    親要素となる、<ul id="MENU_NAVI"> 要素直下の <li>要素はインラインブロックで表示させるようにしているため、見出しアンカーとなる直前の<p>の真下に表示されるようになりますので、あとは適宜上マージンを適切な値にして隙間が出来ないようにします。

    尚、下にパディングを設けておりますが、これは手が滑ってポップアップさせたメニューからマウスカーソルが外れてもすぐに消えないようにするための措置です。

  5. 実際にポップアップしたときのスタイルは 普段非表示になっている(display: none; プロパティを与えられている)<ul>要素をブロックレヴェル要素として表示させるものとなります。

    ここで、セレクタとして、以下の二つの状況を挙げておきます。

    1. 見出しアンカーとなる直前の<p>にマウスカーソルがある場合のその直後の<ul>要素
    2. ポップアップされた<ul>要素にマウスカーソルがある場合

    前者はポップアップさせるために必要です。

    一方、後者はポップアップさせた後に当該メニュー上にマウスカーソルが移動したときの状態となります。

CSSだけでは対応出来ないブラウザにも対応するには。(平成21年10月16日)

さて、CSSだけでもこんな事が出来る訳ですが、それにはCSS第二水準に完全に準拠していないといけません。

初めに解説した通り、平成21年10月16日現在、以下のブラウザはユーザ数が比較的多いブラウザですが、CSSだけでポップアップメニューを実現する事は出来ません。

これらの環境でもポップアップメニューを実現したいのであれば、JAVAスクリプトを用いてDOM操作を行わなければなりません。

実際にDOM操作を行う例については、DOMの表示スタイルへの応用内のCSSのみでポップアップメニューが実現出来ない環境への対策をご覧ください。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com