<body>
<!--アコーディオンメニュー部分 start-->
<nav class="accordion">
<!--1階層アコーディオン start-->
<label for="menu1">menu1 ▼</label>
<input type="checkbox" id="menu1" class="toggle" />
<ul>
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
<!--1階層アコーディオン end-->
<!--2階層アコーディオン start-->
<label for="menu2">menu2 ▼</label>
<input type="checkbox" id="menu2" class="toggle" />
<ul>
<li><a href="#">menu2.1</a></li>
<li><a href="#">menu2.1</a></li>
<label for="menu2_1">menu2.1 ▼</label>
<input type="checkbox" id="menu2_1" class="toggle" />
<ul>
<li><a href="#">menu2.2</a></li>
<li><a href="#">menu2.2</a></li>
</ul>
</ul>
<!--2階層アコーディオン end-->
<a href="#">menu3</a>
</nav>
<!--アコーディオンメニュー部分 end-->
</body>
.accordion ul {
list-style: none;
margin:0;
}
label{
cursor: pointer;
}
.toggle{
display: none;
}
.toggle + ul{
max-height: 0;
overflow: hidden;
transition: all .5s ease;
}
.toggle:checked + ul{
max-height: 500px;
transition: all 2s ease-in;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.