Dropdown menu?
Hallo,
Ich habe ein Burger Symbol in meinen Code implementiert. Der eine coole Animation macht.
Wie kann ich ihn zu einem Dropdownmenu umwandeln?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
*{
-webkit-tap-highlight-color: transparent;
margin:0;
padding:0;
}
*:focus{
outline: none;
}
html, body{
height: 100%;
background-color: #0e3577;
}
#webapp_cover{
position: absolute;
top:0;
left: 0;
width:100%;
}
#menu_button{
width: 39px;
overflow: hidden;
}
#menu_checkbox{
display: none;
}
#menu_checkbox:checked ~ ul{
top:0;
transitiom:all 100ms;
}
#menue{
height:100px;
position:absolute;
z-index:1;
top:-100px;
width:100vw;
background:red;
display:block;
transition: all 1000ms;
}
#menue li{
width:100%;
height:50px;
font-size:40px;
background:green;
}
#menu_label{
position:relative;
z-index:2;
display: block;
height: 29px;
cursor: pointer;
}
#menu_label:before, #menu_label:after, #menu_text_bar
{
position: absolute;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
}
#menu_label:before, #menu_label:after
{
content: '';
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) left;
}
#menu_label:before
{
top: 0;
}
#menu_label:after
{
top: 12px;
}
#menu_text_bar
{
top: 24px;
}
#menu_text_bar:before
{
content: 'MENU';
position: absolute;
top: 5px;
right: 0;
left: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
text-align: center;
}
#menu_checkbox:checked + #menu_label:before
{
left: -39px;
}
#menu_checkbox:checked + #menu_label:after
{
left: 39px;
}
#menu_checkbox:checked + #menu_label #menu_text_bar:before
{
animation: moveUpThenDown 0.8s ease 0.2s forwards, shakeWhileMovingUp 0.8s ease 0.2s forwards, shakeWhileMovingDown 0.2s ease 0.8s forwards;
}
@keyframes moveUpThenDown
{
0%{ top:0; }
50%{ top:-27px;}
100%{ top:-14px; }
}
@keyframes shakeWhileMovingUp
{
0%{ transform: rotateZ(0); }
25%{ transform:rotateZ(-10deg); }
50%{ transform:rotateZ(0deg); }
75%{ transform:rotateZ(10deg); }
100%{ transform:rotateZ(0); }
}
@keyframes shakeWhileMovingDown
{
0%{ transform:rotateZ(0); }
80%{ transform:rotateZ(3deg); }
90%{ transform:rotateZ(-3deg); }
100%{ transform:rotateZ(0); }
}
</style>
<div id="webapp_cover">
<div id="menu_button">
<input type="checkbox" id="menu_checkbox">
<label for="menu_checkbox" id="menu_label">
<div id="menu_text_bar"></div>
</label>
<ul id="menue">
<li>LINK 1</li>
<li> link 2 </li>
</ul>
</div>
</div>