Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Dropdown menu?

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?

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>