「マウスオーバー時に低階層メニューを表示する」ってギミックに限り、
アニメーションとかいらないってなら、
jsとか使わないでcssだけで作ったほうが楽だった。
多分今後もやっていく。
こう作る
メニュー自体のデザインは今回省く。
キモのところだけ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <ul class="menu"> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li class="submenu"><a href="">メニュー</a> <ul> <li><a href="">子メニュー</a></li> <li><a href="">子メニュー</a></li> <li class="submenu"><a href="">子メニュー</a> <ul> <li><a href="">孫メニュー</a></li> <li><a href="">孫メニュー</a></li> <li><a href="">孫メニュー</a></li> </ul> </li> </ul> </li> </ul> <style> |
1 2 | ul.menu ul{ display: none;} ul.menu li:hover > ul{ display: block;} |
「マウスオーバーしたliに入ってるulを表示する」がこれでできる。
下階層のあるliに対しての装飾例
「子メニューは下に生えてくるよ」
「孫メニュー以下は右に生えてくるよ」
ってアイコンをつけるとすると、例えばこんな感じ。
1 2 3 4 5 | /* 階層ありの装飾例 */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'); .submenu a:after{ font-family: fontawesome;} .submenu > a:after{ content: '\f107';} .submenu .submenu > a:after{ content: '\f105';} |
まとめ
わざわざ記事にしなくても「>」の使い方がわかってれば誰でも思いつく方法ではある。
当然というか、スマホとかタブレットにはマウスオーバーは不向きなので別の手段が必要。
コメント