Problem bei Drop-Line–Menu / Dropline soll "stehenbleiben"

wex_stallion · 21.12.2011

Shalömchen,

der Print-Saurier findet wahrscheinlich mal wieder nicht die passenden Suchbegriffe.

Ich schraub gerade an einem Drop-Line-Menu, an sich funktioniert das ganz gut, aber an einem Teil verzweifle ich gerade vortrefflich:

Ich würde gerne, dass nach Anwahl eines Menupunktes aus der Dropline, also der zweiten Reihe eben jene auch stehen bleibt und nicht wieder verschwindet.

Dass das rein mit CSS nicht funktioniert habe ich schon gelesen, mit JS und ähnlichem Kram kenn ich mich dooflicherweise Null aus, weiß also leider auch nicht wonach ich suchen soll.

Stand bis jetzt:

a.) Seite anzeigen:

NAVI1 NAVI2 NAVI3

b.) Hover funktioniert, ist eine <ul> drunter, wird die beim drüberfahren/anklicken auch sichtbar, sieht dann so aus:

NAVI1 NAVI2 NAVI3
NAVI1.1 NAVI1.2

Leider krieg ich die Dropline nach dem Klick nicht "gehalten"

Wunschvorstellung:

--
NAVI1 NAVI2 NAVI3
NAVI1.1 NAVI1.2

Contentdarstellung von NAVI1.2

--

Ich habe auch schon ein JS-unterstützes Menu ausprobiert, und mir das entsprechende .js-File man angeschaut, aber irgendwie werd ich nicht schlau daraus. Hab halt nur Hauptschule

Falls jemand eine Idee hat, wie ich ein solches Menu realisieren kann, würde ich mich um entsprechende Niederschrift freuen.

Danke schomma vorab!

Grütze
Wex

Myhar · 22.12.2011

AW: Problem bei Drop-Line–Menu / Dropline soll "stehenbleiben"

Dafür wirst du wohl kein JS sondern CSS verwenden müssen, wenn ich dich richtig verstanden habe.
Wenn du auf den Untermenüpunkt klickst, dann wird doch eine neue Seite vom Server zurückgeliefert mit dem Content von Unterpunkt1, habe ich dich da richtig verstanden?
Wenn ja, dann musst du Navipunkt1 nur eine Klasse mitgeben (zb active), wo du dann steuern kannst, dass das Untermenü sichtbar ist:

HTML:

/*Untermenü standardmäßig unsichtbar*/
ul ul {display:none}

/*Untermenü bei hover einblenden*/
ul:hover ul {display:block}

/*Untermenü bei aktivem Zustand anzeigen*/
ul.active ul {display:block}

Das ist ein sehr einfaches Beispiel, du wirst vielleicht ein display:inline statt display:block benötigen, aber ich hoffe, das Prinzip ist klar

wex_stallion · 28.12.2011

AW: Problem bei Drop-Line–Menu / Dropline soll "stehenbleiben"

Mich deucht, dass sich das Vorhaben ohne JavaScript, oder ähnlichem, nicht umsetzen lässt.

»active« ist dann zu ende, wenn die Maustaste losgelassen wird. Dann lädt sich, wie du sagtest, die gewählte Seite und es gibt im Submenu kein (klingt blöd) aktives »active« mehr und deshalb ist es nicht sichtbar.

simonpicos · 28.12.2011

AW: Problem bei Drop-Line–Menu / Dropline soll "stehenbleiben"

Das aufklappen per "klick" kann mit :target per CSS gelöst werden.

Hier mal quick 'n dirty:
ist jetzt nichts gestylt oder so, aber das Prinzip sollte klar sein.

//edit
Mit der Browserunterstützung siehts aber beim IE vor Version 9 düster aus (weil CSS3)

Hoffe, dass ich helfen konnte

Gruß
Simon