<div class="menu--container">
<input id="menu" class="menu--toggle" type="checkbox">
<label for="menu" class="menu--toggle--text">Menu</label>
<div class="menu--body">
<ul class="menu--list">
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
</ul>
</div>
</div>
.menu--toggle,
.menu--body {
display: none;
}
/* The trick,display the item when the menu label is on */
.menu--toggle:checked ~ .menu--body {
display: block;
}
/* other styling */
.menu--toggle--text {
display: block;
padding: 16px;
margin: 0 auto;
cursor: pointer;
background-color: #000;
color: #fff;
user-select: none;
}
.menu--list {
list-style: none;
background-color: #ccc;
padding: 16px;
}
.menu--list li {
margin: 5px;
}
a {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #000;
text-decoration: underline;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.