CSSのみで多階層のプルダウンメニューを作る【改訂版】
Coding,Design tips
Tags:CSS
以前このブログで書いた「CSSのみで横並びのプルダウンメニューを作る」の記事の改訂版になります。今回は以前作った横並びのプルダウンメニューを多階層にしました。以前だとメニューからサブメニューが飛び出してくるだけだったのが、さらに階層が深くなり、3階層までを作りました。もとのプルダウンメニューをご覧になりたい方は以前の記事「CSSのみで横並びのプルダウンメニューを作る」を一度ご覧ください。
基本のHTML
基本のHTMLは以前のものにclassとメニューをつけたしました。どこからが子メニューでどこからが孫メニューかは定かではないのですが、ここでは以前作ったサブメニューの次が子メニューとします。新たに書き加えたのはsubMenuのliの中にchildMenuとclassをつけて子メニューを加えました。さらにいくつかの子メニューの中には孫メニューとしてgrandsonMenuという名前をつけています。
|
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 55 56 57 58 59 60 61 62 |
<ul class="Menu"> <li><a href="#">Menu1</a> <ul class="subMenu"> <li><a href="#">subMenu1</a></li> <li><a href="#">subMenu2</a></li> <li class="childMenu"><a href="#">subMenu3</a> <ul> <li class="grandsonMenu"><a href="#">childMenu1</a> <ul> <li><a href="#">grandsonMenu1</a></li> <li><a href="#">grandsonMenu2</a></li> <li><a href="#">grandsonMenu3</a></li> </ul></li> <li><a href="#">childMenu2</a></li> <li><a href="#">childMenu3</a></li> </ul></li> <li><a href="#">subMenu4</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul class="subMenu"> <li><a href="#">subMenu1</a></li> <li class="childMenu"><a href="#">subMenu2</a> <ul> <li class="grandsonMenu"><a href="#">childMenu1</a> <ul> <li><a href="#">grandsonMenu1</a></li> <li><a href="#">grandsonMenu2</a></li> <li><a href="#">grandsonMenu3</a></li> <li><a href="#">grandsonMenu4</a></li> </ul></li> <li class="grandsonMenu"><a href="#">childMenu2</a> <ul> <li><a href="#">grandsonMenu1</a></li> <li><a href="#">grandsonMenu2</a></li> <li><a href="#">grandsonMenu3</a></li> </ul></li> <li><a href="#">childMenu3</a></li> </ul></li> <li class="childMenu"><a href="#">subMenu3</a> <ul> <li><a href="#">childMenu1</a></li> <li><a href="#">childMenu2</a></li> <li><a href="#">childMenu3</a></li> <li><a href="#">childMenu4</a></li> </ul></li> <li><a href="#">subMenu4</a></li> <li><a href="#">subMenu5</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul class="subMenu"> <li><a href="#">subMenu1</a></li> <li><a href="#">subMenu2</a></li> <li><a href="#">subMenu3</a></li> <li><a href="#">subMenu4</a></li> <li><a href="#">subMenu5</a></li> </ul> </li> <li><a href="#">Menu4</a> </li> <li><a href="#">Menu5</a> </li> </ul> |
多階層を表示するためのCSS
続いてCSSです。以前と同じ部分は省略します。付け足したところはchildMenuのところとgrandsonMenuのところですね。また、前回はMenuのみにホバーした時にsubMenuが表示されるように（消しておかないと、関係ないところでメニューが出てきてしまうため）subMenuのところにoverflow:hiddenをかけてopacityで非表示にしていたのですが、それをしてしまうと多階層にした時に横に子メニューが表示してくれないので、今回はvisibility:hiddenを使いました。transitionも変えていますが、ここはお好みで。
|
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 |
.Menu li ul.subMenu{ top:0; position:absolute; z-index: 10; visibility: hidden;/* ←修正箇所 */ opacity: 0;/* ←修正箇所 */ transition: .2s ease-out;/* ←修正箇所 */ width:0; height:0; } .Menu li:hover ul.subMenu{ visibility: visible;/* ←修正箇所 */ opacity: 1; width:inherit; height:inherit; top: 39px; point:cursor; } /* ここから新しく書き加えた部分 */ .Menu li ul.subMenu li.childMenu,.Menu li ul.subMenu li.childMenu ul li.grandsonMenu{ position:relative; } .Menu li ul.subMenu li.childMenu > a:after,.Menu li ul.subMenu li.childMenu ul li.grandsonMenu > a:after{ content:">"; margin-left:5px; } .Menu li ul.subMenu li.childMenu ul,.Menu li ul.subMenu li.childMenu ul li.grandsonMenu ul{ visibility: hidden; opacity:0; position:absolute; top:0; left:199px; transition: .2s ease-out; } .Menu li ul.subMenu li.childMenu:hover ul,.Menu li ul.subMenu li.childMenu ul li.grandsonMenu:hover ul{ point:cursor; visibility: visible; opacity: 1; } |
subMenu liにrelativeをつけておき、childManuの親要素とします。そして普段はvisibility: hiddenとopacity:0で隠しておき、li.childMenuやli.grandsonMenuにホバーした時に表示させます。表示させるときはsubMenuの横に高さを揃えて表示させたいのでtopは0にしておき、leftでsubMenuの幅分の値を入力すれば表示されます。point:cursorはliなどのaタグ以外の要素にhoverをつけた場合マウスのポインタを変えるプロパティです。そして階層がある部分にはわかりやすいように:afterで＞の目印をつけました。ここはアイコンを入れたりとか工夫するといいですね。今回は簡単にしました。また、子メニューを入れたいサブメニューにchildMenuのようなclassをつけることで:afterの指定をしやすくしました。
