Schwieriges Menü (zumindest für mich)

W

Wutaler

Mitglied
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?

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 :p)
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
 
Zuletzt bearbeitet:
Mit Javascript ist doch fast alles möglich.
Du wllst oben eine hauptnavi haben und wenn du da die Links hovern tust soll irgendwo anders auf der Seite dein Submenü von den Link angezeigt werden ?

Ich kucke mal ob ich da ein Beispiel finde ansonsten läßt sich sowas ja eigentlich auch leicht umsetzten ( mit JS ) . Nur Css müsste ich erst selbst Testen
 
Hallo und entschuldige bitte die späte Reaktion meinerseits auf dein Posting.

Also über css muss das nicht wirklich laufen, Javascript würde mir persönlich reichen :) Danke für deine Mühe!
 
da gibt es natürlich auch mehrere Wege wie man das machen kann.
Ich weiß nicht wie du genau die Position angaben machen willst deswegen sind das 2 Varianten.
1. data-left und data-top kann im html eingetragen werden wo deine Menüs ein geploppt werden sollen.
Da ich nicht wüsste, ob jedes Menü ne andere Position bekommen soll oder alle an der gleichen.So kann man jedes woanders anzeigen lassen , wenn man will.

2. Du gibst den Menüs die Positionen über das CSS und kannst die Data Werte aus den HTML raus nehmen.

im Beispiel kannst du beide Möglichkeiten ausprobieren, wenn du das auskommentierte rausnimmst

Link zur Lösung



Falls du es doch anders meintest, dann brauche ich nochmal nee Erklärung.

EDIT: habe erst eben gesehen das du auch JQuery nutzt. Ich habe es mit Nativen JS gemacht. JQuery würde den Code noch etwas vereinfachen
 
Zuletzt bearbeitet:
Ich muss da ehrlich sagen, dass das mit CSS einfacher und deutlich schneller ist als mit JS, bedenke dass nicht jeder JS aktiv hat, falls es öffentlich gehen soll :)

CSS bietet da :target, :hover etc... an :)
 
Aber nur wenn die box auf der gleichen dom ebene liegt, bzw ein Kind ist. Oder meinst du das anders ?
Wie sein Beispiel in Post 1 kommt man da mit Css doch gar nicht mehr hin oder liege ich da jetzt falsch ?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück