連載 :
ここまでできる！CSS3CSS3で作るナビゲーション
2011年11月17日(木)
CSS3で作るドロップダウンメニュー
次は、図3のようなサブメニューが表示されるドロップダウン型のナビゲーションを作ってみましょう。
|
|
| 図3：マージンとパディングの指定（クリックで拡大） |
HTMLは次のようになります。
［リスト09］HTMLソース（dropdown.html）
01 | <ul id="nav"> |
02 | <li> |
03 | <a href="#">Home</a> |
04 | </li> |
05 | <li> |
06 | <a href="#">Menu A</a> |
07 | <ul> |
08 | <li><a href="#">Menu A-01</a></li> |
09 | <li><a href="#">Menu A-02</a></li> |
10 | <li><a href="#">Menu A-03</a></li> |
11 | </ul> |
12 | </li> |
13 | ～中略～ |
14 | <li> |
15 | <a href="#">Menu C</a> |
16 | <ul> |
17 | <li><a href="#">Menu C-01</a></li> |
18 | <li><a href="#">Menu C-02</a></li> |
19 | <li><a href="#">Menu C-03</a></li> |
20 | </ul> |
21 | </li> |
22 | </ul> |
メインメニューをul要素でマークアップし、navというID名を付けます。サブメニューは、ul要素を入れ子にします。
メインメニューを装飾する
メインメニューの装飾方法は、先のサンプル同様、リンクテキストはGoogle Web Fontsのフォントを利用、text-shadowで影を付け、gradientで背景のグラデーションを指定しています。float: left;で横並びにするのも先ほどと同様です。ここでのポイントは、position: relative;とし、サブメニューの基点を設定しておくことです。
［リスト10］CSSソース（dropdown.css）
01 | #nav > li { |
02 | width: 150px; |
03 | margin: 0; |
04 | padding: 0; |
05 | list-style-type: none; |
06 | float: left; |
07 | position: relative; /* 基点を設定 */ |
08 | ～略～ |
09 | } |
10 | #nav li a { |
11 | display: block; |
12 | padding: 13px 0; |
13 | color: #ccc; |
14 | text-decoration: none; |
15 | text-shadow: -1px -1px 0 #000; |
16 | font-size: 14px; |
17 | border-right: 1px #4c4c4c solid; |
18 | border-left: 1px #4c4c4c solid; |
19 | height: 14px; |
20 | font-family: 'Lobster Two', cursive; |
21 | } |
サブメニューの表示と非表示を切り替える
サブメニューの表示と非表示は、displayプロパティで切り替えます。通常時は、display: none;で非表示にしますが、カーソルホバー時には、display: block;で表示されるよう指定します。
配置する位置は、position:absolute;として親要素を基点に、上から40px、左から0pxの位置に配置します。また、重なりの順番がメインメニューの上になるよう、z-indexに大きめの値を入れています。
［リスト11］CSSソース（dropdown.css）
01 | #nav ul { |
02 | margin: 0; |
03 | padding: 0; |
04 | list-style-type: none; |
05 | display: none; /* 非表示 */ |
06 | position: absolute; /* 親要素を基点に配置 */ |
07 | top: 40px; |
08 | left: 0; |
09 | z-index: 999; /* 最前面に配置 */ |
10 | background: #fff; |
11 | -moz-box-shadow: 2px 3px 3px #ccc; |
12 | -webkit-box-shadow: 2px 3px 3px #ccc; |
13 | box-shadow: 2px 3px 3px #ccc; |
14 | } |
15 | /* カーソルホバー時に表示 */ |
16 | #nav li:hover ul { |
17 | display: block; |
18 | } |
フキダシを作る
サブメニューのフキダシは、li要素の最初の子要素aの後に仮想コンテンツを挿入し、そこにボーダーのスタイルを指定して表現しています。左ボーダーと右ボーダーを5px幅で透明に、下ボーダーを10px幅で色を付けることで、三角形になります（図4）。これをフキダシに見える位置に配置して完成です。
|
|
| 図4：3辺のボーダーで三角形を作る |
［リスト12］CSSソース（dropdown.css）
01 | #nav ul li:first-child > a:after { |
02 | content: ''; |
03 | position: absolute; |
04 | left: 30px; |
05 | top: -10px; |
06 | width: 0; |
07 | height: 0; |
08 | border-left: 5px solid transparent; |
09 | border-right: 5px solid transparent; |
10 | border-bottom: 10px solid #fff; |
11 | } |
12 |
13 | #nav ul li:first-child a:hover:after { |
14 | border-bottom-color: #0066cc; |
15 | } |
「CSS3で作るナビゲーション」サンプルプログラム
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
