こんにちは、「BRANCH FOR PRO」の中の人です。

今回はJavaScriptを使わないで実現する、「ドロップダウンメニュー」をご紹介します。

「準備編」ではメインメニューの表示の体裁を整えましたが、次はいよいよ「マウスを載せるとサブメニューが現れる」という、動作をするCSSに入っていきたいと思います。

先ずは、「とりあえず動作するCSS」をご覧いただきましょう。HTMLファイルは「準備編」と全く一緒です。

@charset "UTF-8";

/* メニューバーの装飾 */
ul.ddmenu {
    width: 500px;              /* メニューバーの横幅は500px */
    margin: 0 auto;            /* メニューバーを中央寄せ */
    padding: 0;                /* 内側の余白を0にする */
    background-color: #008b8b; /* 背景色が、ダークシアン */
    font-size: 0;              /* <li>項目の間に、余計なマージンが入らないように、フォントサイズを0にする */
}

/* メニューの各項目の装飾 */

/* リスト項目 */
ul.ddmenu li {
    width: 125px;              /* メニュー項目の横幅(125px) */
    display: inline-block;     /* 横並びにする */
    list-style-type: none;     /* リストの装飾(横の黒丸など)を消す */
    position: relative;        /* サブメニューで、position: absolute; を使うための準備 */
    font-size: 18px;           /* フォントサイズは18px */
}

/* リストの中の、アンカー領域の装飾 */
ul.ddmenu a {
    background-color: #008b8b; /* 背景色がダークシアン*/
    color: #ffffff;            /* 文字色が白 */
    line-height: 40px;         /* アンカーの高さが40px */
    text-align: center;        /* 文字は中央寄せ */
    text-decoration: none;     /* 文字の装飾(下線など)は無し */
    font-weight: bold;         /* 文字を太めに */
    display: block;            /* 領域全体をリンク可能に */
}

/* アンカー領域にカーソルが載ったときの装飾 */
ul.ddmenu a:hover {
    background-color: #2f4f4f; /* 背景色をダークスレートグレーにする */
    color: #ffffe0;            /* 文字色をライトイエローにする */
}

/* サブメニューの表示設定 */
ul.ddmenu ul {
    display: none;             /* 標準では非表示にする */
    margin: 0;                 /* 外側の余白を0にする */
    padding: 0;                /* 内側の余白を0にする */
    position: absolute;        /* 位置指定を絶対配置にする */
}

/* サブメニューがある場合に開く処理 */
ul.ddmenu li:hover ul {        /* メニュの項目にマウスが載ったときには… */
    display: block;            /* マウスが載っている項目の内部にあるリストを表示する */
}

「準備編」で解説した部分は省略します。では、その続きを解説させていただきます。

/* サブメニューの表示設定 */
ul.ddmenu ul {
    display: none;             /* 標準では非表示にする */
    margin: 0;                 /* 外側の余白を0にする */
    padding: 0;                /* 内側の余白を0にする */
    position: absolute;        /* 位置指定を絶対配置にする */
}

「準備編」では「とりあえず非表示」でしたが、今回は「最初は非表示、だけれど表示されるときの指定」を書き加えています。ここで目を引くのは「position: absolute;」の部分です。この指定は「表示されたら、その直下にサブメニューを表示する」ということを指定しています。

では、次に進みます。ここが動作の肝心な部分です。

/* サブメニューがある場合に開く処理 */
ul.ddmenu li:hover ul {        /* メニュの項目にマウスが載ったときには… */
    display: block;            /* マウスが載っている項目の内部にあるリストを表示する */
}

ここのCSSのセレクタが「ul.ddmenu li:hover ul」になっていることに注目してください。

これは、「一番外側のul class=”ddmenu”」要素の内側にある「li」要素にマウスが載ったときに、さらにその内側にある「ul」要素のCSSを「display: block;」にする、という指定です。

もともと、「ul.ddmenu ul」のセレクタで指定された部分(直前にご紹介した部分です。)は「display: none;」となっており表示されなかったのですが、このセレクタで指定したとおりに「li」要素にマウスが載ると、「display: block;」が効いて、表示されるようになります。

ここが肝となります。

さて、CSSの変更はここまでです。実際に動作している画面をお見せしましょう。

どうでしょうか?サブメニューが表示されるようになりましたね!!

しかし、なんだかサブメニューがかっこ悪いです…。文字が2行になっていたりとかしていますよね?そこでここの体裁を整えていきましょう。

次のCSSファイルをご覧ください。

@charset "UTF-8";

/* メニューバーの装飾 */
ul.ddmenu {
    width: 500px;              /* メニューバーの横幅は500px */
    margin: 0 auto;            /* メニューバーを中央寄せ */
    padding: 0;                /* 内側の余白を0にする */
    background-color: #008b8b; /* 背景色が、ダークシアン */
    font-size: 0;              /* <li>項目の間に、余計なマージンが入らないように、フォントサイズを0にする */
}

/* メニューの各項目の装飾 */

/* リスト項目 */
ul.ddmenu li {
    width: 125px;              /* メニュー項目の横幅(125px) */
    display: inline-block;     /* 横並びにする */
    list-style-type: none;     /* リストの装飾(横の黒丸など)を消す */
    position: relative;        /* サブメニューで、position: absolute; を使うための準備 */
	font-size: 18px;           /* フォントサイズは18px */
}

/* リストの中の、アンカー領域の装飾 */
ul.ddmenu a {
    background-color: #008b8b; /* 背景色がダークシアン*/
    color: #ffffff;            /* 文字色が白 */
    line-height: 40px;         /* アンカーの高さが40px */
    text-align: center;        /* 文字は中央寄せ */
    text-decoration: none;     /* 文字の装飾(下線など)は無し */
    font-weight: bold;         /* 文字を太めに */
    display: block;            /* 領域全体をリンク可能に */
}

/* アンカー領域にカーソルが載ったときの装飾 */
ul.ddmenu a:hover {
    background-color: #2f4f4f; /* 背景色をダークスレートグレーにする */
    color: #ffffe0;            /* 文字色をライトイエローにする */
}

/* サブメニューの表示設定 */
ul.ddmenu ul {
    display: none;             /* 標準では非表示にする */
    margin: 0;                 /* 外側の余白を0にする */
    padding: 0;                /* 内側の余白を0にする */
    position: absolute;        /* 位置指定を絶対配置にする */
}

/* サブメニューがある場合に開く処理 */
ul.ddmenu li:hover ul {        /* メニュの項目にマウスが載ったときには… */
    display: block;            /* マウスが載っている項目の内部にあるリストを表示する */
}

/* サブメニューが開かれたときの装飾 */
ul.ddmenu ul li {
    width: 135px;                  /* サブメニューの項目の横幅は135px */
    border-top: solid 1px #000000; /* サブメニューの項目の上側は、黒の境界線を引く */
}

/* サブメニューの中の、アンカー領域の装飾 */
ul.ddmenu ul li a {
    line-height: 35px;             /* 高さは35p */
    text-align: left;              /* 文字は左寄せ */
    padding-left: 5px;             /* 内側の左側の余白は5px */
    font-weight: normal;           /* 文字の太さは普通 */
    font-size: 13px;               /* 文字の大きさは13px */
}

/* サブメニューの中の、アンカーにマウスが載ったときの装飾 */
ul.ddmenu ul li a:hover {
    background-color: #a9a9a9;     /* 背景色をダークグレイにする */
    color: #000000;                /* 文字色は黒にする */
}

さて、これまで解説した部分にさらにCSSが追加されていますね。その部分をご説明します。

/* サブメニューが開かれたときの装飾 */
ul.ddmenu ul li {
    width: 135px;                  /* サブメニューの項目の横幅は135px */
    border-top: solid 1px #000000; /* サブメニューの項目の上側は、黒の境界線を引く */
}

ここで、サブメニューが開かれたとき(正確には、開かれていないときにも適応されるのですが、開かれていないときには「display: none;」なので見えないだけです。)の表示の体裁を指定しています。

セレクタに注目すると、「ul.ddmenu ul li」となっていますので、サブメニュー部分の「li」タグの指定をしています。

ここでは「横幅が135px」、「上のボーダーが1pxの幅で黒の実線」を指定しています。さらにサブメニューの装飾を続けていきます。

/* サブメニューの中の、アンカー領域の装飾 */
ul.ddmenu ul li a {
    line-height: 35px;             /* 高さは35p */
    text-align: left;              /* 文字は左寄せ */
    padding-left: 5px;             /* 内側の左側の余白は5px */
    font-weight: normal;           /* 文字の太さは普通 */
    font-size: 13px;               /* 文字の大きさは13px */
}

くどいかもしれませんが(もう少しです。)、セレクタが「ul.ddmenu ul li a」なので、サブメニューの中の「a」要素の指定をしています。

ここのCSSはご説明しなくてもご理解いただけると思いますので、次に進みます。

/* サブメニューの中の、アンカーにマウスが載ったときの装飾 */
ul.ddmenu ul li a:hover {
    background-color: #a9a9a9;     /* 背景色をダークグレイにする */
    color: #000000;                /* 文字色は黒にする */
}

ここでは、サブメニューの「a」要素にマウスが載ったときの表示を指定しています。このCSSでは背景色と文字色を変更していることがお分かりかと思います。

これでサブメニューの体裁は整いました。実際に表示をしてみましょう。

どうでしょうか?サブメニューもきれいになりましたね!これでドロップダウンメニューが完成しました。もちろん、CSSをいじればさらに表示を洗練させることができます。ぜひ挑戦してみてください。

これで、この記事を終わります。お読みいただきありがとうございます。