CSSのみで多階層のプルダウンメニューを作る【改訂版】

以前このブログで書いた「CSSのみで横並びのプルダウンメニューを作る」の記事の改訂版になります。今回は以前作った横並びのプルダウンメニューを多階層にしました。以前だとメニューからサブメニューが飛び出してくるだけだったのが、さらに階層が深くなり、3階層までを作りました。もとのプルダウンメニューをご覧になりたい方は以前の記事「CSSのみで横並びのプルダウンメニューを作る」を一度ご覧ください。

基本のHTML

基本のHTMLは以前のものにclassとメニューをつけたしました。どこからが子メニューでどこからが孫メニューかは定かではないのですが、ここでは以前作ったサブメニューの次が子メニューとします。新たに書き加えたのはsubMenuのliの中にchildMenuとclassをつけて子メニューを加えました。さらにいくつかの子メニューの中には孫メニューとしてgrandsonMenuという名前をつけています。

多階層を表示するためのCSS

続いてCSSです。以前と同じ部分は省略します。付け足したところはchildMenuのところとgrandsonMenuのところですね。また、前回はMenuのみにホバーした時にsubMenuが表示されるように(消しておかないと、関係ないところでメニューが出てきてしまうため)subMenuのところにoverflow:hiddenをかけてopacityで非表示にしていたのですが、それをしてしまうと多階層にした時に横に子メニューが表示してくれないので、今回はvisibility:hiddenを使いました。transitionも変えていますが、ここはお好みで。

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の指定をしやすくしました。

DEMO

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

これを覚えるとデザインの幅が広がる!CSS擬似クラスと擬似要素

簡単5分でパララックスサイトができる!jQuery fullpage.jsの使い方

CSSで蛍光ペンで下線を引いたようなマーカー風デザインを作る方法