縦に広げるメニュー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>メニュー</title>
<style>
<!--
*{margin:0;padding:0;}
ul{list-style-type:none;}
.menu{display:none;}
.check{display:none;}
.switch {display:inline-block;width:1rem;height:1rem;}
.switch span{color:red;display:inline-block;transform: rotate( -90deg );}
.switch + a + ul{position:relative;left:1rem;display:none;}
.check:checked + label span{transform: rotate( 0 );}
.check:checked + label + a + ul {display:block;}
-->
</style>
</head>
<body>
<input type="checkbox" id="menu00" class="check" value="0" /><label for="menu00" class="switch"><span>▼</span></label>
<a>メニュー</a>
<ul class="menu">
<li><input type="checkbox" id="menu01" class="check" value="0" /><label for="menu01" class="switch"><span>●</span></label>
<a>メニュー１</a>
</li>
<li><input type="checkbox" id="menu02" class="check" value="0" /><label for="menu02" class="switch"><span>▼</span></label>
<a>メニュー２</a>
<ul>
<li><input type="checkbox" id="menu02-1" class="check" value="0" /><label for="menu02-1" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
<li><input type="checkbox" id="menu02-2" class="check" value="0" /><label for="menu02-2" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
</ul>
</li>
<li><input type="checkbox" id="menu03" class="check" value="0" /><label for="menu03" class="switch"><span>●</span></label>
<a>メニュー３</a>
</li>
<li><input type="checkbox" id="menu04" class="check" value="0" /><label for="menu04" class="switch"><span>▼</span></label>
<a>メニュー４</a>
<ul>
<li><input type="checkbox" id="menu04-1" class="check" value="0" /><label for="menu04-1" class="switch"><span>▼</span></label>
<a>サブメニュー</a>
<ul>
<li><input type="checkbox" id="menu04-1-1" class="check" value="0" /><label for="menu04-1-1" class="switch"><span>●</span></label>
<a>孫メニュー</a>
</li>
<li><input type="checkbox" id="menu04-1-2" class="check" value="0" /><label for="menu04-1-2" class="switch"><span>●</span></label>
<a>孫メニュー</a>
</li>
</ul>
</li>
<li><input type="checkbox" id="menu04-2" class="check" value="0" /><label for="menu04-2" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
</ul>
</li>
<li><input type="checkbox" id="menu05" class="check" value="0" /><label for="menu05" class="switch"><span>▼</span></label>
<a>メニュー５</a>
<ul>
<li><input type="checkbox" id="menu05-1" class="check" value="0" /><label for="menu05-1" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
<li><input type="checkbox" id="menu05-2" class="check" value="0" /><label for="menu05-2" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
追記：2021/4/22 25:00頃
応用（「▼」だけでなく「メニュー」をクリックしてもメニューを開きたい）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>メニュー</title>
<style>
<!--
*{margin:0;padding:0;}
ul{list-style-type:none;}
.menu{display:none;}
.check{display:none;}
.switch {display:inline-block;width:1rem;height:1rem;}
.switch span{color:red;display:inline-block;transform: rotate( -90deg );}
.switch + a + ul{position:relative;left:1rem;display:none;}
.check:checked + label span{transform: rotate( 0 );}
.check:checked + label + a + ul {display:block;}
.check:checked + label + label + ul {display:block;}
-->
</style>
</head>
<body>
<input type="checkbox" id="menu00" class="check" value="0" /><label for="menu00" class="switch"><span>▼</span></label>
<label for="menu00">メニュー</label>
<ul class="menu">
<li><input type="checkbox" id="menu01" class="check" value="0" /><label for="menu01" class="switch"><span>●</span></label>
<a>メニュー１</a>
</li>
<li><input type="checkbox" id="menu02" class="check" value="0" /><label for="menu02" class="switch"><span>▼</span></label>
<a>メニュー２</a>
<ul>
<li><input type="checkbox" id="menu02-1" class="check" value="0" /><label for="menu02-1" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
<li><input type="checkbox" id="menu02-2" class="check" value="0" /><label for="menu02-2" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
</ul>
</li>
<li><input type="checkbox" id="menu03" class="check" value="0" /><label for="menu03" class="switch"><span>●</span></label>
<a>メニュー３</a>
</li>
<li><input type="checkbox" id="menu04" class="check" value="0" /><label for="menu04" class="switch"><span>▼</span></label>
<a>メニュー４</a>
<ul>
<li><input type="checkbox" id="menu04-1" class="check" value="0" /><label for="menu04-1" class="switch"><span>▼</span></label>
<a>サブメニュー</a>
<ul>
<li><input type="checkbox" id="menu04-1-1" class="check" value="0" /><label for="menu04-1-1" class="switch"><span>●</span></label>
<a>孫メニュー</a>
</li>
<li><input type="checkbox" id="menu04-1-2" class="check" value="0" /><label for="menu04-1-2" class="switch"><span>●</span></label>
<a>孫メニュー</a>
</li>
</ul>
</li>
<li><input type="checkbox" id="menu04-2" class="check" value="0" /><label for="menu04-2" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
</ul>
</li>
<li><input type="checkbox" id="menu05" class="check" value="0" /><label for="menu05" class="switch"><span>▼</span></label>
<a>メニュー５</a>
<ul>
<li><input type="checkbox" id="menu05-1" class="check" value="0" /><label for="menu05-1" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
<li><input type="checkbox" id="menu05-2" class="check" value="0" /><label for="menu05-2" class="switch"><span>●</span></label>
<a>サブメニュー</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
追記：2021/4/23 12:50頃
「▼メニュー」の「▼」と「メニュー」の間に隙間が空いてしまう問題が発生。
その解決方法。
修正前
<input type="checkbox" id="menu00" class="check" value="0"
/><label for="menu00"
class="switch"><span>▼</span></label>
<a>メニュー</a>
修正後（htmlソースの改行位置を変える）
コメント
コメントを投稿