前回要件を定義した、ヘッダメニューをコーディングしてみます。
ソースコード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<label>
<input class="open" type="checkbox" />
<ul>
<li>
<p>AAA</p>
<ul>
<li>
<p>List-A-1</p>
<ul>
<li><p>List-A-1-1</p></li>
<li><p>List-A-1-1</p></li>
<li><p>List-A-1-1</p></li>
</ul>
</li>
<li>
<p>List-A-2</p>
<ul>
<li><p>List-A-2-2</p></li>
<li><p>List-A-2-2</p></li>
<li><p>List-A-2-2</p></li>
</ul>
</li>
<li>
<p>List-A-3</p>
<ul>
<li><p>List-A-3-3</p></li>
<li><p>List-A-3-3</p></li>
<li><p>List-A-3-3</p></li>
</ul>
</li>
</ul>
</li>
<li>
<p>BBB</p>
<ul>
<li><p>List-B-1</p></li>
<li><p>List-B-2</p></li>
<li><p>List-B-3</p></li>
</ul>
</li>
<li>
<p>CCC</p>
<ul>
<li><p>List-C-1</p></li>
<li><p>List-C-2</p></li>
<li><p>List-C-3</p></li>
</ul>
</li>
</ul>
</label>
</header>
<main>
</main>
</body>
</html>
style.css
@import "header.css";
html,body{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
}
*, *: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;
}
main{
flex:1;
background-color:#444;
}
header.css
header{
height:40px;
background-color:black;
}
header *{
color:white;
font-size:10px;
user-select : none;
}
header .open{
display:none;
}
header p{
display:flex;
align-items:center;
padding:0 10px;
}
header ul{
margin:0;
padding:0;
}
header li{
margin:0;
padding:0;
list-style:none;
position:relative;
cursor:pointer;
min-width:100px;
height:40px;
}
header > label > ul{
display:flex;
flex-direction:rows;
}
header > label > ul > li ul{
display:none;
flex-direction:column;
background-color:black;
position:absolute;
}
header .open:checked ~ ul li:hover > ul{
display:flex;
}
header > label > ul > li > ul{
top:100%;
left:0;
}
header > label > ul > li > ul ul{
top:0;
left:100%;
}
header li:hover{
background-color:#444;
}
header > label > ul > li li:has(ul)::after{
content:">";
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
color:white;
}
デモ
ポイント解説
Javascriptを使わずに、input type="checkbox"のcheckedをCSSで判定する方法で書いてみました。
HTMLとCSSが得意なコーダーの人だったら、さほど難しくないと思いますが、プログラマーと言われる人たちにとっては、こういうCSSって難しいようですね・・・
AAAのリストのみ、１階層深いサブメニューを表示するようにセットしてみました。
ネストを深くすれば、どんどんドリルダウンできてしまいますが、画面外の判定をしていないので、注意ポイントですね。
ひとつ難点があり、メニュー内に、スライダーなどの機能を設置して、リンクじゃない場合は、クリックした後すぐにメニューが非表示になってしまいます。
もし操作系をメニュー内に設けたい場合は、クリックしてからポップアップウィンドウなどで対応するのがいいでしょう。
あ、あと、レスポンシブデザイン考えていなかった！！！
画面サイズでcss切り替える方式で問題ないかとは思いますが、スマホではメニュー概念を変えないといけないかもですね。
あとがき
この手のメニューは、自分でライブラリを作って作り置きして、コピペで使えるようにすると効率的に仕事で活用できます。
ちなみに、今回のメニューも既に３回ぐらい作っているので、まあまあ効率的なコードになっていると思います。
もし、コードで不明点などある人がいたら、
問い合わせフォームにて質問してくださいませ。
