0
Ich versuche zu erstellen "Schubladen-Looking" Navbar inspiriert von diesem IKEA: IKEA navbar. Als ich auf "Rooms" klickte, erwartete ich, dass nicht nur die Liste der Räume auftauchte, sondern auch der Rest des Seiteninhalts nach unten verschoben werden musste. Ich habe JQuery animate() benutzt, funktioniert aber nicht. Das ist mir natürlich bewusst Ich muss irgendwie das Listen-Toggeln und mein grünes div-Verhalten (aka "Seiteninhalt") synchronisieren, aber zuerst muss ich das grüne div zwingen, nach unten zu gehen, wenn ich auf "Rooms" klicke. Wie geht das?So erstellen Sie Navbar mit "Schubladen-Looking" Verhalten
$(document).ready(function() {
$(".headers:first").on({
click: function() {
$(".rooms").slideToggle();
/* $("#restof").slideToggle();*/
/* $("#restof").css("padding-top","300px").slideToggle();
*/
$("#restof").animate({
top: "100px"
});
},
});
});#restof {
background-color: lightgreen;
width: 300px;
height: 100px;
}
.rooms {
list-style: none;
position: absolute;
display: none;
}
.headers {
list-style: none;
display: inline-block;
margin-right: 100px;
position: relative;
}
/*
.movedown{
margin-top:100px;
}
*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
<ul>
<li class="headers" id="rooms">Rooms</li>
<ul class="rooms">
<li>BEDROOM</li>
<li>KITCHEN</li>
<li>BATHROOM</li>
</ul>
<li class="headers" id="products">Products</li>
</ul>
</nav>
<div id="restof" </div>
https://codepen.io/anon/pen/zdNVrp - Haben Sie zuerst Ihre primäre Navigation, dann Ihre sekundären Navigationsfunktionen. Entferne 'position: absolute' und der Inhalt wird sich von alleine bewegen. Erledigt. –
Ihr HTML ist falsch; das Kind "ul" muss in ein li gesetzt werden. Es kann kein Kind einer anderen "ul" sein. Sie vermissen auch ein '>' auf dem 'div', und haben ein extra' '' 'in der JS –