Schwieriges Menü (zumindest für mich)
Hallo liebe Community :)
ich stehe momentan vor einem Problem beim Designen eines Menüs das per Jquery angesteuert werden soll. Es geht um eine 2 Level horizontale Navbar.
Folgendes Problem:
Ich möchte in der Oberen Reihe die Hauptlinks positionieren. Soweit auch kein Problem. Wenn ich dann über die Hauptlinks mit der maus "hover" soll das Submenü eingeblendet werden. Auch kein Problem, das wurde ja alles schon mal gemacht ;) (Beispiel)
Nur bei mir ist es so, dass das Submenü gar nicht direkt unter dem Hauptmenü aufpoppen soll, sondern viel weiter unten. Bei dem oben gezeigten Beispiel handelt es sich ja um eine verschachtelte UL-Liste.
Wie kann ich es realisieren das eine von der Hauptnav unabhängige UL-Liste angezeigt wird?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
ul,li{
list-style:none;
}
nav ul li{
float:left;
width:calc(25% - 2px);
border:1px solid black;
}
#subnav_category1,
#subnav_category2,
#subnav_category3,
#subnav_category4{
position:absolute;
display:none;
height:auto;
width:200px;
border:2px solid black;
background:grey;
color:white;
}
/*wenn data nicht im html steht dann must du hier den boxen die positionen geben zb so
#subnav_category1{
top:200px;
left:100px;
}
#subnav_category1{
top:220px;
left:200px;
}
#subnav_category3{
top:240px;
left:300px;
}
#subnav_category4{
top:260px;
left:400px;
}
*/
</style>
<nav><ul>
<li data-links="100" data-top="200" id="mainnav_category1">Link 1</li>
<li data-links="200" data-top="220" id="mainnav_category2">Link 2</li>
<li data-links="300" data-top="240" id="mainnav_category3">Link 3</li>
<li data-links="400" data-top="260" id="mainnav_category4">Link 4</li>
</ul>
</nav>
<ul id="subnav_category1">
<li>Link 1.1</li>
<li>...</li>
</ul>
<ul id="subnav_category2">
<li>Link 2.1</li>
<li>...</li>
</ul>
<ul id="subnav_category3">
<li>Link 3.1</li>
<li>...</li>
</ul>
<ul id="subnav_category4">
<li>Link 4.1</li>
<li>...</li>
</ul>
<script>
//Mit data werte im li element
let li = document.querySelectorAll("nav ul li");
for (let index = 0; index < li.length; ++index) {
li[index].addEventListener('mouseover', e => {
let left=li[index].getAttribute('data-links');
let top=li[index].getAttribute('data-top');
box=document.getElementById("subnav_category"+parseInt(index+1));
box.style.top=top+'px';
box.style.left=left+'px';
box.style.display='block';
li[index].addEventListener('mouseout',function(){
box.style.display='none';
})
});
}
/*
//wenn position über css vergeben wird dann so
let li = document.querySelectorAll("nav ul li");
for (let index = 0; index < li.length; ++index) {
li[index].addEventListener('mouseover', e => {
box=document.getElementById("subnav_category"+parseInt(index+1));
box.style.display='block';
li[index].addEventListener('mouseout',function(){
box.style.display='none';
})
});
}
*/
</script>