Hallo liebe Community ![Smile :) :)](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f642.png)
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?
Mal ein Beispielcode wie ich mir das vorstelle:
Wie schaffe ich es nun, das beim Hover über Link 3 weiter unten das Submenü 3 aufgerufen wird, ohne das es beim "raushoovern" direkt verschwindet und beim Hoovern über 1 das Submenü 1 angezeigt wird... etc. Denke man kann sich vorstellen was ich damit meine (hoffentlich
)
Und wie kann ich es dann noch realisieren, wenn ich mich nun auf einer Seite der Hauptkatergorie z.b. 2 befinde, das beim Seitenladen auch direkt das Submenü 2 angezeigt wird, quasi als aktives menü?
EDIT:
Habe mal eine mögliche Version als Screenshot von dem Menü angehangen.
ABER: Ja es wäre als verschachteltes UL->LI->UL->LI Menü machbar, ich würde es trotzdem bevorzugen wenn das obere UL Menü von dem unteren UL-Menü entkoppelt wäre. So wäre die Positionierung leichter
![Beispiel.PNG Beispiel.PNG](https://www.tutorials.de/data/attachments/51/51811-63901b1125c07a3385c588403a8ca93b.jpg?hash=Y5AbESXAej)
![Smile :) :)](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f642.png)
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
![Wink ;) ;)](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f609.png)
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?
Mal ein Beispielcode wie ich mir das vorstelle:
HTML:
<ul> //Als Inline Navbar gestyled über CSS
<li id="mainnav_category1">Link 1</li>
<li id="mainnav_category2">Link 2</li>
<li id="mainnav_category3">Link 3</li>
<li id="mainnav_category4">Link 4</li>
</ul>
<br>
<br>
...
<br>
<br>
<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>
Wie schaffe ich es nun, das beim Hover über Link 3 weiter unten das Submenü 3 aufgerufen wird, ohne das es beim "raushoovern" direkt verschwindet und beim Hoovern über 1 das Submenü 1 angezeigt wird... etc. Denke man kann sich vorstellen was ich damit meine (hoffentlich
![Stick out tongue :p :p](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f61b.png)
Und wie kann ich es dann noch realisieren, wenn ich mich nun auf einer Seite der Hauptkatergorie z.b. 2 befinde, das beim Seitenladen auch direkt das Submenü 2 angezeigt wird, quasi als aktives menü?
EDIT:
Habe mal eine mögliche Version als Screenshot von dem Menü angehangen.
ABER: Ja es wäre als verschachteltes UL->LI->UL->LI Menü machbar, ich würde es trotzdem bevorzugen wenn das obere UL Menü von dem unteren UL-Menü entkoppelt wäre. So wäre die Positionierung leichter
![Beispiel.PNG Beispiel.PNG](https://www.tutorials.de/data/attachments/51/51811-63901b1125c07a3385c588403a8ca93b.jpg?hash=Y5AbESXAej)
Zuletzt bearbeitet: