制作者の活動(PR)。

<dl class="hiddenMenu">
    <dt>主なアイドル</dt>
    <dd>
        <ul>
            <li><a href="…">堀北真希</a></li>
            …
            </il>
        </dd>
    </dl>

HTMLのマークアップはここまで

ご覧のように、何の変哲も種も仕掛けもない定義リストです。強いて言えば、クラス名が附与されている事くらいでしょうか。

しかし、ここに以下のCSSを適用する事で、動的に表示/非表示が変えられるようになるのです。

隠しメニューを実現するCSSのスタイル定義を読み飛ばす

/* 普段のスタイル */
dl.hiddenMenu>dd {
    display: none;
    }

dl.hiddenMenu:hover>dt:after {
    color: #ccc;
    content: "(一覧の表示)";
    text-decoration: none;
    }

/* マウスカーソルが在るときのスタイル */
dl.hiddenMenu:hover>dd {
    display: block;
    }

dl.hiddenMenu>dt:after {
    color: #060;
    content: "(一覧の表示)";
    text-decoration: underline;
    }

隠しメニューを実現するCSSのスタイル定義はここまで

からくりは実に単純で、普段のスタイルとして、

<dl class="hiddenMenu">要素直下の<dd>要素は、普段は非表示にしております。(但し、:after擬似要素を認識しないインターネットエクスプローラ 7.0では無効)
一方、<dl class="hiddenMenu">要素直下の<dt>要素の直後には、下線付きで (一覧の表示) と表示させる事で、アンカーのように見せております。(但し、:after擬似要素を認識しないインターネットエクスプローラ 7.0では無効)

ここで、直下セレクタを使ったのは、インターネットエクスプローラ 6.0までで機能させないようにするためです。直下セレクタを下位セレクタに書き換えても、IE 6.0までは正常に動作しないので、認識出来ない直下セレクタで弾く事にしているのです。
<dt>要素にCSSでリストが表示される旨を表示したのは、HTMLに書いてしまうとCSSに対応していない環境やインターネットエクスプローラ 6.xなどの対応が充分でない環境で意味不明な表示になってしまうからです。

そして、当該要素にマウスカーソルが乗ったときのスタイル、すなわちホヴァーされた <dl class="hiddenMenu">要素でのスタイルとして、

<dl class="hiddenMenu">要素直下の<dd>要素を、ブロックレヴェル要素のスタイルで表示させます。
一方、<dl class="hiddenMenu">要素直下の<dt>要素の直後に表示していた文字を、薄いねずみ色にする事で無効であるように見せております。(但し、:after擬似要素を認識しないインターネットエクスプローラ 7.0では無効)

要するに、:hover擬似クラスが適用される要素の下位要素についてのスタイルを特別に定める事で、マウスカーソルが乗っている状態でのみ表示させる事が可能になると言う訳です。

ただ、インターネットエクスプローラ 6.0までではそのような動作をしてくれないので、DOMを活用するか表示したままにしておくかのどちらかとなるでしょう。

この他に考えられる使い方。

サイトのメニューはしばしば定義リストとしてマークアップされますが、説明文は普段は隠しておいて、メニューのアンカーにマウスが乗ったときに説明文が表示されるようにすると言う事が考えられます。

例えば、以下のようなメニューがあったとします。

HTMLでのメニューの一例を読み飛ばす

<dl class="menu">
    <dt><a href="About.html">当サイトについて</a></li>
    <dd>当サイトについての総合案内です。</dd>

    <dt><a href="HTML/index.html">HTMLとCSS</a></li>
    <dd>WWWで公開する文書の作成に欠かせないHTMLとCSSについての簡単な解説です。</dd>

    <dt><a href="I_love_Horikita/index.html">堀北真希ちゃん</a></li>
    <dd>我がアイドル・俺の嫁・堀北真希ちゃんについてのコーナです。</dd>

    …
    </dl>

HTMLでのメニューの一例はここまで

この場合、CSSで以下のように書くと、何とJAVAスクリプト無しでマウスカーソルが現れたときのみ表示させる事が出来るようになります。

メニューの解説文の表示/非表示を切り替えられるCSSのスタイル定義を読み飛ばす

dl.menu dd {
    display: none;
    }

dl.menu dt:hover+dd {
    display: block;
    }

メニューの解説文の表示/非表示を切り替えられるCSSのスタイル定義はここまで

余談・クリックで切替は出来ないのか？

▲記事先頭
△前項目

今回のスタイル定義は、マウスカーソルを合わせると前触れも無くいきなり表示されるとと言うものであり、ちょっと使い難いと思った方もいらっしゃるかも知れません。

それでは、特定の箇所をクリックしたときに表示されるようにする事はCSSだけでも可能でしょうか。

結論から言うと、CSSだけではちょっと無理でしょう。

クリックについては :active擬似クラスがありますが、これはマウスボタンを押している間だけ有効となります。

クリックしたボタンから手が離れると折角表示させたメニューがまた隠れてしまい、使い物にならないでしょう。

結局、クリックでの切替を求めるのであれば、JAVAスクリプトでDOM操作を行う必要があります。

また、マウスカーソルが離れてしまうとすぐにメニューが隠れてしまうのも使い難いと思った方もいらっしゃるかも知れません。これもCSSには時間経過後にスタイルを変えると言う時間セレクタとでも言うべきものが存在しないのでCSSだけでは無理でしょう。

この頁の本文はここまでです(本文の先頭へ)

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

ページ外へのご案内。

marguerite.site@gmail.com