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