メニューサンプルはどのホームページでも使われていて比較的利用頻度が高いと思いますが、僕の追求するポイントとして、「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のソースコードの文字数分、サーバアクセストラフィックが減少する、いい事づくしだ！
