CSS-Only-Pulldown-Menü (mit JS-"Hilfsmotor" für IE)

[seb]

Ein komplett in CSS realisiertes Multilevel-Dropdown-Menü für alle Browser mit Unterstützung der CSS-Pseudoklasse ':hover' für beliebige Elemente (nicht nur für Links), also alle halbwegs modernen Vertreter der Mozilla-Familie, Opera und Safari.

Obwohl der Internet Explorer nicht dazugehört, funktioniert es dort trotzdem dank einer kleinen JS-Funktion, die ihm die fehlende Funktionalität quasi 'nachrüstet'.

Das CSS wandelt fest ins Dokument geschriebene UL-Listen in Menüs um und ist damit barrierefrei, da kein Code per Javascript erzeugt wird und bei fehlender CSS-Unterstützung immer noch die unformatierte UL-Standarddarstellung verwendet werden kann.

Es ist nicht wirklich meine Eigenkreation, sondern basiert auf diesem tollen alistapart.com-Artikel.

Ich hab lediglich das CSS ein wenig optimiert (möglicherweise auf Kosten von Browsern, mit denen ich es nicht testen konnte) und den JS-Workaround für IE so umgeschrieben, dass man <ul>-Listen einfach per CSS-Klassenangabe als Dropdown-Menü definieren kann.

Demo

Wie man die Sache einrichtet, dürfte aus der Beispielseite ersichtlich sein, die auch im ZIP-File enthalten ist.

[fettmme]

Danke für das Menü. An genau soetwas saß ich gerade

Ich hab's heute morgen mal in unserem "Usabillity-Labor" an unserer Zielgruppe getestet. Leider fährt das Menü zu schnell zu. Besonders, wenn man nicht gut mit der Maus umgehen kann und das Listenelement kurzzeitig verlässt.

Hast Du spontan eine Idee, wie man das verbessern könnte?

[seb]

Leider fährt das Menü zu schnell zu.

Das stört mich auch, aber CSS allein gibt dir keine Möglichkeit, das zu kontrollieren.

Dazu müsste man wieder mit JS dran, wo dieses Experiment ja eigentlich zeigen soll, dass so ein Menü - einen modernen Browser vorausgesetzt - auch mit CSS allein umgesetzt werden kann.

Allerdings könnte man es wirklich auch mit Javascript erweitern, ohne dass die "graceful degradation" (Bezeichnung in Fachartikeln für den Erhalt der Nutzbarkeit bei fehlendem CSS und/oder Javascript) verloren geht.

Insofern ist dieser Ansatz schonmal wesentlich besser als mein altes Menü, das Javascript unbedingt braucht und ohne einfach garnichts anzeigt.

Vielleicht probier ich das mit der JS-basierten "Bremse" mal aus...

[Granate]

Hola!
Als Neuling voll begeistert von deinem Menü, seb, wollte ich das naturlich auch gleich verwenden. Denke mal das geht in Ordnung, wenn du es soooo offen darlegst. Wenn nicht bitte ich hier auch gleich um deine Erlaubnis.
Nur wollte ich es an eine Tabelle anpassen und bin langsam aber sicher am Verzweifeln.
Ich habe mir das so vorgestellt:
Tabellenzeile, mit mehreren Zellen.
Jede Zelle ist das Erste Level seines eigenen Menüs.

Nur bekomm ich es nicht gebacken - Habe als Anfänger wohl auch etwas zu hohe Erwartungen an meine Seite. Vielleicht habt Ihr ja Interesse, das Menü hier zu erweitern. Mir wäre es eine große Hilfe.
Und wer meinen Code sieht wird gleich erkennen, dass ich noch einiges lernen sollte. Aber dennoch - Vielleicht hilft mir ja jemand (*bitte*bitte*verzweifel)

Besten Dank
Hochachtungsvoll
TK

[walter]

Wollte nur anmerken das das Demo bei mir im Opera 7.22 nicht einwandfrei funktioniert.
Beim ersten mal wenn ich ins Menür gehe, funktionierts einwandfrei. Wenn ich es aber mehrmals versuche streikts.

Gruß
Walter

[cocaxx]

Hi!

Ich hab den Opera 7.52 Beta irgendwas unter Linux installiert und damit geht es einwandfrei!

grüße
cocaxx

[seb]

Joa, ab 7.5 funktioniert es besser.

[cocaxx]

Hi!

Ich hab dennoch ein Problem damit. Bei mir sieht die Menüleiste wie folgt aus:


abc sdskfkghkdkd gfdged egeglmdolgmldmglmldm sgsfa


Nun hat aber jeder Menüeintrag eine fixe Breite. Kann ich das so machen, dass die Breite autom. angepasst wird? Wenn ich die Breite einfach kleiner mache, ist das aufklappende Menü zu "dünn"


grüße
cocaxx

[cocaxx]

Hi!

Ich hab mal ein Bild gemacht um zu zeigen, was ich genau meine....

[holunda]

hallo zusammen,

bin jetzt auch umgestiegen von deinem alten auf das neue Script, und ich muss sagen, dass ich es wirklich genial finde.

Nur eine DAU frage habe ich noch:
Ich schaffe es einfach nicht die ersten ULS horzizontal anzugeigen ... Kann mir da wer helfen.

Grüße und danke Alex

[seb]

Dazu musst du für die <LI>s der ersten Ebene ein 'float:left' definieren.

Ich zeig hier nochmal die grundlegenden CSS-Regeln, wie ich sie für so ein Menü z.Zt. verwende. Jegliche optische Gestaltung fehlt, es liefert nur die Funktionalität:

ul.dropdown
{
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
}

ul.dropdown * ul
{
    list-style: none;
    margin:0;
    padding: 0;
    display:none;
    position:absolute;
    z-index:99;
}

ul.dropdown li
{
    float:left;
    padding:2px; /* helps Opera < 7.5x with hover - do not remove! */
}

ul.dropdown li * li
{
    float:none;
    position: relative;     /* required? */
}

ul.dropdown ul * ul
{
    left:98%;
    top:0;
    width:100%;
}

ul.dropdown a
{
    display:block;
}


ul.dropdown ul * a
{
    width:13em;
}



ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
} 

[holunda]

hi seb, schaut momentan ganz gut aus, bis auf einen hässlichen Linken Rand -> das ganze Menü wird etwa 50 px vom linken Rand hereingeschoben. An was kann das liegen?

hier mein css:

/* -------------------------- BEGIN do not change --------------------------- */

ul.dropdown * ul
{
	list-style: none;
    margin:0;
    padding: 0;
    display:none;
    position:absolute;
    z-index:99;
}

ul.dropdown li
{
	list-style:none;
    float:left;
	background-color:#f9f9f9;
    padding:2px; /* helps Opera < 7.5x with hover - do not remove! */
}

ul.dropdown li * li
{
    float:none;
    position: relative;     /* required? */
}

ul.dropdown ul * ul
{
    left:98%;
    top:0;
    width:100%;
}

ul.dropdown a
{
    display:block;
}


ul.dropdown ul * a
{
    width:13em;
}



ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
} 

/* -------------------------- END do not change --------------------------- */



ul.dropdown a.has_submenu
{
    /*background:url(arrow_right.gif) no-repeat right;*/
}

#nav
{
	font:10px verdana;
    background-color:#f9f9f9;
}

#nav a
{
    color:#000;
    padding:3px;
    text-decoration:none;
}

#nav a:hover
{
    background-color:#e4faec;
    color:#000;
}


#nav ul
{
    background-color:#f9f9f9;
    border:1px outset #cfcfcf;
}

dann hätte ich da noch eine Sache:
Ab und zu geth das Menü nicht auf IE. Habe die JS Function mit menu = function(){ ... } definiert und dann per window.onload=menu; gestartet. Ab und zu gibts auf meinen Seiten aber auch einen Onload per body. Kann es sein, dass es da Zwistigkeiten gibt?

lG
Alex

[seb]

Der linke Rand ist wahrscheinlich einfach der standardmäßige Einschub der Liste. Setz auf das oberste UL mal padding:0 und margin:0.

Und was das JS-Problem betrifft, bin ich unwissend. Hast du ermittelt, dass das Menü ausschließlich bei einem onload im <body> nicht funktioniert? Wenn ja, kann man davon ausgehen, dass es daran liegt.

[holunda]

ok, das mit dem Rand habe ich jetzt mit deiner Hilfe beheben können.

ZUm JS Ding:
Habe ich getestet und ist wirklich so wie ich vermutet habe. Wie löst man das am elegantesten. WIll nämlich nicht meine ganzen onLoad functions uim enable_ ... erweitern.

Nochwas:
Wie würdest du das Problem mit den Selektboxen und dem IE lösen, is wirlich ein hässlicher Effekt, der in meiner Applikation weg muss!

lG (und danke für das spitzen menü)
Alex

[seb]

Zum JS-Problem:

Da wird wohl die einzige Möglichkeit sein, alle onLoad-Sachen in das JS-Script unter window.onload = ... zu schreiben.

Es ist sowieso 'sauberer', ins HTML überhaupt keinen JS-Code (über Event-Handler oder <script>-Bereiche) einzustreuen und statt dessen alles in eine separate .js-Datei auszulagern.

Man trennt praktisch Struktur (HTML) und Verhalten (JS) nach dem gleichen Prinzip und aus den gleichen Gründen, wie wir es für Struktur und Aussehen (CSS) mittlerweile gelernt haben.

Überzeugt hat mich davon dieser Artikel.