bln_design
Neues Mitglied
Hallo ich habe folgenden Code. Wenn ich das Menü öffne, steigen die Listenpunkte auf. Wenn ich das Menü schließe sollen die Listenpunkte einfach verschwinden. Wie bekomme ich das hin? LG
CSS:
nav#menu ul {
position: absolute;
top: 60px;
left: 0px;
width: 100%;
height: 0px;
z-index: 999;
background: #e6e6e6;
display: flex;
justify-content: center;
flex-direction: column;
transition: 0.5s;
transition-delay: 1s;
box-shadow: 0px 2px 5px grey;
}
nav#menu ul.show {
position: absolute;
top: 60px;
left: 0px;
width: 100%;
height: 300px;
z-index: 999;
background: #e6e6e6;
display: flex;
justify-content: center;
flex-direction: column;
transition: 0.5s;
box-shadow: 0px 2px 5px grey;
}
nav#menu ul li {
visibility: hidden;
float: left;
list-style: none;
margin-left: 0px;
padding-left: 10%;
margin-top: 10px;
font-size: 20px;
transform: translate(0px, 80px);
}
nav#menu ul li:nth-child(1) {
transition: 0.5s;
transition-delay: 0.5s;
}
nav#menu ul li:nth-child(2) {
transition: 0.5s;
transition-delay: 0.6s;
}
nav#menu ul li:nth-child(3) {
transition: 0.5s;
transition-delay: 0.7s;
}
nav#menu ul li:nth-child(4) {
transition: 0.5s;
transition-delay: 0.8s;
}
nav#menu ul li:nth-child(5) {
transition: 0.5s;
transition-delay: 0.9s;
}
nav#menu ul li.show {
visibility: visible;
float: left;
list-style: none;
margin-left: 0px;
margin-top: 10px;
font-size: 20px;
transform: translate(0px, 0px);
}
HTML:
<nav id="menu">
<ul>
<li><a href="index.html" class="active">Punkt 1</a></li>
<li><a href="p2/">Punkt 2</a></li>
<li><a href="p3/">Punkt 3</a></li>
<li><a href="p4/">Punkt 4</a></li>
<li><a href="p5/">Punkt5 </a></li>
</ul>
</nav>
Javascript:
<script>
$('.menu-icon img').on('click', function(e) {
$('nav#menu ul').toggleClass("show");
$('nav#menu ul li').toggleClass("show");
e.preventDefault();
});
</script>