[HTMLパーツ] メニュー項目サンプル #3「多階層対応cssのみ」

2019年2月14日

HTML テクノロジー プログラミング

t f B! P L
メニューサンプルはどのホームページでも使われていて比較的利用頻度が高いと思いますが、僕の追求するポイントとして、「WEBサイトをいかに軽くするか」というスピード高速化があります。 これまでのメニューサンプルは、javascriptを使ってインタラクティブに構築してきましたが、今回はそれらを踏襲して、jsを使わずにcssとhtmlのみで同じようなメニューを作ってみました。 やってみて思ったのは、ハードルが高いかと思ったけど、意外とチョロかったですね。 何故なら前回とほぼ同じコードで一部だけを書き換えただけで、css化が成功したので、世の中のjQueryに頼らないと何もできないホームページしか作れないエンジニアを嘲笑ってやりたくなりました。

デモ

JS版との動作の違い

js版と明確に違うのは、クリックして子階層が表示していたのを、マウスオーバーで子階層表示する点です。 この仕様はcssではどうしても対応できずに、致し方ない仕様になってしまいました。 一応何故かわからない人の為に解説しておくと、クリック動作はactiveというcss処理でも似た処理を持っていますが、マウスボタンを押している間しか処理できないので、クリックに該当するイベントがないというわけです。 代わりに、マウスオーバーは、hoverとして、便利に使えるため、多くのサイトでこの処理を採用しているケースも多いでしょう。 とりあえず、若干の操作感は違いますが、子階層を表示してそのリンクボタンを押す事ができるので、目的は達成できます。

ソースコード

<html lang="en"> <head> <meta charset="utf-8"> <title>HTML-parts Header</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="menu.css"> </head> <body> <div class="menu-bar"> <ul> <li data-dropdown="1"> <a href="javascript:void(0)">Menu-1</a> <ul> <li><a href="#menu-1-1">Menu-1-1</a></li> <li><a href="#menu-1-2">Menu-1-2</a></li> </ul> </li> <li> <a href="#menu-2">Menu-2</a> </li> </ul> <ul> <li data-dropdown="1"> <a href="javascript:void(0)">Menu-3</a> <ul> <li><a href="#menu-3-1">Menu-3-1</a></li> <li data-dropdown="1"> <a href="#menu-3-2">Menu-3-2</a> <ul> <li><a href="#menu-3-2-1">Menu-3-2-1</a></li> <li><a href="#menu-3-2-1">Menu-3-2-2</a></li> <li data-dropdown="1"> <a href="#menu-3-2-3">Menu-3-2-3</a> <ul> <li><a href="#menu-3-2-3-1">Menu-3-2-3-1</a></li> <li><a href="#menu-3-2-3-2">Menu-3-2-3-2</a></li> <li><a href="#menu-3-2-3-3">Menu-3-2-3-3</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html> html,body{ margin : 0; padding : 0; border : 0; width : 100%; height : 100%; } *, *:before, *:after { -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -o-box-sizing : border-box; -ms-box-sizing : border-box; box-sizing : border-box; } .menu-bar{ height : 60px; border-bottom : 1px solid #AAA; line-height : 60px; display : -webkit-flex; display : flex; -webkit-justify-content : center; justify-content : center; -webkit-align-items : center; align-items : center; } /* basic */ .menu-bar ul{ margin : 0; padding : 0; border : 0; } .menu-bar ul li{ margin : 0; padding : 0; border : 0; list-style : none; } .menu-bar ul li a{ display : inline-block; height : 100%; padding : 0 8px; cursor : pointer; text-decoration : none; color : #666; white-space : nowrap; } .menu-bar ul li a:hover{ color : #C66; } /* top-menu */ .menu-bar > ul{ display : flex; height : 100%; min-width : 100px; } .menu-bar > ul > li{ position : relative; } .menu-bar > ul > li > a{ min-width : 100px; text-align:center; } .menu-bar ul > li:hover > a{ background-color:#eee; } .menu-bar ul > li:hover > a{ animation: menu-noactive 0.3s linear forwards; } .menu-bar ul > li.dropdown > a:after, .menu-bar ul > li[data-dropdown="1"] > a:after{ content: ""; display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 6px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; box-sizing: border-box; margin-left:4px; } /* second-menu */ .menu-bar > ul > li ul{ position : absolute; line-height : 30px; border:1px solid #aaa; border-width:1px 1px 0; opacity : 0.0; visibility : hidden; transform : scale(0); transform-origin:top; } .menu-bar > ul > li > ul{ top : 100%; left : 0; background-color:white; } .menu-bar ul > li:hover > ul{ visibility : visible; opacity : 1.0; animation: menu-list-open 0.1s linear forwards; } /* .menu-bar ul > li[data-view="0"] > ul{ animation: menu-close 0.3s linear forwards; animation: menu-list-close 0.1s linear forwards; } */ .menu-bar > ul > li > ul li{ position:relative; border-bottom : 1px solid #aaa; } .menu-bar > ul > li > ul li > a{ min-width : 120px; text-align:center; } /* third-menu */ .menu-bar > ul > li > ul > li ul{ position:absolute; top:0; left:100%; } .menu-bar > ul > li > ul > li ul > li{ position:relative; min-width:120px; } @keyframes menu-noactive{ 0%{ background-color:#eee; } 100%{ background-color:rgba(255,255,255,0.0); } } @keyframes menu-close{ 0%{ opacity:1.0; visibility:visible; } 100%{ opacity:0.0; visibility:hidden; } } @keyframes menu-list-open{ 0%{ transform : scaleY(0); } 100%{ transform : scaleY(1); } } @keyframes menu-list-close{ 0%{ transform : scaleY(1); } 100%{ transform : scaleY(0); } }

解説

ポイントとしては、前回[data-view="1"]と書いていた箇所が、jsでフラグと切り替えていた処理だったので、この時をマウスオーバーの処理にすれば、イベント処理が使えるようになります。 なので、そのまま":hover"と書き換えてやっただけなんですけどねwww そして、jsを使わなかった分、WEBページの処理も軽くなり、jsのソースコードの文字数分、サーバアクセストラフィックが減少する、いい事づくしだ!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ