よく迷うのでこれを機にまとめておこうかと。
通常時のメニュー
html
|
1 2 3 4 5 |
<nav> <ul> <li><a href="#">・・・</li> </ul> </nav> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
body{ margin:0 auto; } nav { border-top:8px solid #34589e; background: #2a6fb7; } nav ul{ overflow:hidden; list-style:none; margin:0 auto; padding:0; max-width:100%; } nav li{ box-sizing:border-box; /* padding+ボーダーまで含めた幅 */ float:left; border-right: 1px solid #34589e; width:20%; /* 5つあるので5等分*/ } nav li:last-child{ border-right:none; } nav li a{ display:block; padding:20px 0; width:100%; text-decoration:none; text-align:center; font-size:14px; color:#fff; } nav li a:hover{ background:#34589e; } |
携帯(いわゆる縦のメニュー)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
body{ margin:0 auto; } nav { border-top:8px solid #34589e; background: #2a6fb7; } nav ul{ list-style:none; margin:0 auto; padding:0; } nav li{ border-bottom: 1px solid #34589e; } nav li:last-child{ border-right:none; } nav li a{ display:block; padding:20px 0; width:100%; text-decoration:none; text-align:center; font-size:14px; color:#fff; } nav li a:hover{ background:#34589e; } |
メモ
- box-sizing:border-boxは幅まで含めた幅を均等に出せる
- last-childのborder-noneを忘れないように
- a要素はinline-blockだったりtable-cellのこともあるが、幅を指定することが大切。
ホバー時の画像選択
html
|
1 2 3 4 5 |
<nav> <ul> <li><a href="#" class="abount">・・・</li> </ul> </nav> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
body{ margin:0 auto; } nav { border-top:8px solid #000000; } nav ul{ overflow:hidden; list-style:none; margin:0 auto; padding:0; width:1700px; } nav li{ box-sizing:border-box; /* padding+ボーダーまで含めた幅 */ float:left; width:100px; height:100px; margin-right:50px; text-indent:-9999px; } nav li:last-child{ margin-right:0; } nav li a{ display:block; padding:20px 0; width:100%; text-decoration:none; text-align:center; font-size:14px; color:#fff; } nav li a:hover{ display:block; width:100%; background: url(画像パス) no-repeat } /*通常時*/ .about{ bacground-position:left 0 px top 0px; } あとはメニューごとにずらす /*ホバー時*/ .abount:hover{ background-position:left 0px top -100px } |
- ホバーをcssでなく画像で処理する場合、大きい画像の位置をずらして1つに見せる
小ネタ 選択されているときのメニュー
※activeではなく、クリックされ選択されているケース
html
|
1 2 3 4 5 6 |
<nav> <ul> <li><a href="#">・・・</li> <li><a href="#" class="curent" >・・・</a></li> </ul> </nav> |
css
|
1 2 3 4 5 6 |
nav li a:hover{ background:#34589e; } nav li a.current{ background:#34589e; } |
その他、新しいブラウザであればflexboxなどが強力。
