Horizontale Navi mit Popout

Hi,

ich suche im Moment ein Tutorial für eine horizontale Navigation, die beim Mouseover direkt darunter eine weitere horizontale Navigation anzeigt, die dann die Unterpunkte beinhält.

Möglichst kein JavaScript, wer kann mir da helfen?

Tante Google. „css popup menu“ oder ähnliche Begriffe. Oder auch die Suchfunktion hier im Forum.

Im HTML-Teil sind das verschachtelte Listen.
Im CSS-Teil brauchst Du die Pseudoklasse :hover und musst die Untermenüs mit display ein- und ausblenden.

Und für ältere IEs brauchst Du eine JavaScript-Alternative, weil der IE6 nicht mit :hover in anderen Elementen außer einem Link klar kommt.

Und dann muss das Menü natürlich auch ohne JavaScript funktionieren, d.h. Du musst die Elternmenüpunkte der Untermenüs anklickbar machen, und von da aus muss es Links zu den Unterseiten geben.

Genau das wollte ich hören :slight_smile:

Oma Google spuckt mir nämlich nicht aus, ob man es auch zu 100% ohne JS verwirklichen kann …

Danke dir.

In modernen Browsern funktioniert das wunderbar ganz ohne JS. Aber die alten Schinken machen da halt schlapp.
Du kannst natürlich trotzdem auf JS verzichten, dann muss jemand, der auf Unterpunkt 1.1 will, halt erst den Menüpunkt 1 anklicken (hier poppt dann nichts auf) und von der da erscheinenden Seite dann auf Punkt 1.1 klicken. Allerdings ist das halt nicht sonderlich nutzerfreundlich. Da eine JavaScript-Alternative zu bauen, sollte nicht das Problem sein. Wenn dann jemand IE6 mit abgeschaltetem JS benutzt, dann hat er Pech gehabt, denn eine andere Alternative gibts nicht.

Aber nur eine JavaScript-Lösung ist doof für Leute, die moderne Browser aber kein JS nutzen. Die müssen sich dann wie oben beschrieben durchwuseln, und das sehen die dann - zu Recht - nicht ein. Diese Besucher würdest Du wahrscheinlich verlieren.

Welche alternative würdest du Benutzern anbieten, wenn der Kunde eine solche Navigation haben möchte?

CSS + JS alternative?

Oder würdest du dies sogar komplett anders umsetzen?

http://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html

wie schauts damit aus?

Für alle die auch sowas suchen:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/

gute Lösung

CSS + JS Alternative und immer daran denken, dass man auf die Unterseiten auch kommen muss, wenn sich das Untermenü nicht aufklappt.
Das mit dem whatever:hover ist übrigens auch JavaScript.