1-B. 2段のドロップダウンメニューをメニューらしく装飾するCSSソース
前ページで作成したリストがメニューらしく見えるように、CSSソースを記述しましょう。リストに背景色を加えた上で、1階層目の全項目を横方向に並べて「メニューバー」に見えるように装飾します。2階層目(サブメニュー)は、今の時点では非表示にするだけに留めています。■CSSソース：
「★」を付けた部分は修正せずにそのまま記述して下さい。それ以外の部分は値を適宜修正しても構いません。各行の役割は、右側にコメントの形で記しています。
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
margin: 0px; /* メニューバー外側の余白(ゼロ) */
padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
background-color: #cc0000; /* バーの背景色(濃い赤色) */
}
/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
width: 125px; /* メニュー項目の横幅(125px) */
display: inline-block; /* ★1:横並びに配置する */
list-style-type: none; /* ★2:リストの先頭記号を消す */
position: relative; /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
background-color: #cc0000; /* メニュー項目の背景色(濃い赤色) */
color: white; /* メニュー項目の文字色(白色) */
line-height: 40px; /* メニュー項目のリンクの高さ(40px) */
text-align: center; /* メインメニューの文字列の配置(中央寄せ) */
text-decoration: none; /* メニュー項目の装飾(下線を消す) */
font-weight: bold; /* 太字にする */
display: block; /* ★4:項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
color: #dd0000; /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}
/* ▼サブメニューは、とりあえず非表示にしておく */
ul.ddmenu ul {
display: none; /* ★5:非表示にする */
}
上記のCSSソースのうち「★」印を付けた部分の役割を、以下に解説しておきます。- [★1] displayプロパティに値「inline-block」を指定すると、ブロックレベル要素のように装飾できるものの、インライン要素のように配置されます。つまり、描画領域に空間がある限りはリスト項目が横方向に並びます。
- [★2] 標準ではリスト項目(li要素)の先頭には黒丸や白丸などの記号が付加されます。list-style-typeプロパティに値「none」を指定することで、それらの記号を消しています。
- [★3] この記述は現時点では意味がありません。しかし、サブメニューの表示位置を「絶対配置」で記述するためには、このようにpositionプロパティに値「relative」を指定しておく必要があります(詳しくは後述)。
- [★4] リンクを作るa要素に対して、displayプロパティに値「block」を指定すると、リンクがブロックレベル要素のように表示されます。それによって、文字のない余白部分もクリック可能になります。つまり、メニュー項目内全体がクリック可能になります。
- [★5] サブメニュー項目は、最初の段階では非表示になっていないと困りますので、displayプロパティに値「none」を指定して非表示にしています。
■表示例：
ここまでのソースを表示すると、下図のように見えます。赤色のメニューバーが横幅いっぱいに広がっています。また、項目の上にマウスを載せると色が変化します。
Step.1Bの段階では、メインメニュー項目ができあがる
この時点では、まだドロップダウンメニューの2段目であるサブメニューは表示されません。次のページでは、ユーザのマウスの動きに合わせてサブメニューを表示するドロップダウン機能を実現するCSSソースの書き方をご紹介いたします。
【本記事(前半)の目次】
- 概要：ドロップダウンメニューはJavaScript不要のHTML＋CSSで作成可能 (p.1)
- 1-A. 2段のドロップダウンメニューのHTMLソースを書く (p.2)
- 1-B. 2段のドロップダウンメニューをメニューらしく装飾するCSSソースを書く (現在位置)
- 1-C. 2段のドロップダウン機能を実現するCSSソースを書く (p.4)
- 1-D. 2段のドロップダウンメニューのサブメニューを装飾するCSSソースを書く (p.5)
- 1. ソースのまとめ(2段階ドロップダウンメニュー) (p.6)
- 後半：3段以上のドロップダウンメニューの作り方 (p.7～)
