<div id="navbar">
<input type="checkbox" name="activate-menu" id="activate-menu" />
<label for="activate-menu">BOTON</label>
<div class="menu">
<ul class="list">
<li class="option option2">OPCION 1</li>
<li class="option option2">OPCION 2</li>
<li class="option option2">OPCION 3</li>
<li class="option option2">OPCION 4</li>
<li class="option option2">OPCION 5</li>
</ul>
</div>
</div>
a {
font-size: 24px;
font-family: "helvetica" sans-serif;
font-weight: 900;
color: black;
text-decoration: none;
}
.list {
border: 1px red solid;
width: 300px;
height: 170px;
overflow: hidden;
font-size: 18px;
font-family: "helvetica" sans-serif;
font-weight: 600
}
ul {
list-style: none;
}
li.option {
position: relative;
height: 30px;
width: 300px;
border-bottom: 3px black solid;
line-height: 30px; /*line-height centra el texto verticalmente cuando coincide con el height*/
opacity: 0;
left: 150px;
transition: .3s;
}
#activate-menu:checked ~ .menu ul li.option:first-child {transition-delay: .0s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(2) {transition-delay: .05s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(3) {transition-delay: .1s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(4) {transition-delay: .15s;}
#activate-menu:checked ~ .menu ul li.option:last-child {transition-delay: .2s;}
li.option:first-child {transition-delay: .2s;}
li.option:nth-child(2) {transition-delay: .15s;}
li.option:nth-child(3) {transition-delay: .1s;}
li.option:nth-child(4) {transition-delay: .05s;}
li.option:last-child {transition-delay: .0s;}
#activate-menu {
display:none;
}
#activate-menu + label {
cursor: pointer;
}
#activate-menu:checked ~ .menu .list .option {
opacity: 1;
left: 0px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.