こんにちは、「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をいじればさらに表示を洗練させることができます。ぜひ挑戦してみてください。
これで、この記事を終わります。お読みいただきありがとうございます。