Pulldown Menues
Wie man oben auf der Seite sieht, habe ich nun eine ganze Reihe von Informationen in das Pulldown-Menü eingetragen. So lassen sich die meisten Kategorien darüber erreichen. Ausserdem habe ich nun die Möglichkeit, wichtige Artikel in die Menüstruktur aufzunehmen, um sie auf “Ewig” leicht erreichbar zu halten.
Das besondere an diesem Pulldown-Menü ist die vollkommene Abwesenheit von javascript-Schnipseln. Stattdessen habe ich die ganze Funktionalität über css-Eigenschaften gelöst. An alle Nutzer des Internet Explorers: schafft euch einen ordentlichen Browser an. Wenigstens gibt es keine Fehler im Internet Explorer, aber man kommt auch nicht auf die Unterpunkte.
Das Prinzip
Das Prinzip ist eigentlich recht einfach. Ein Menüpunkt ist ein block-Element der Klasse “menu”. Der Titel des Menüs wird mit einem h2-Element markiert, während die Unterpunkte als unsortierte Liste darunter stehen. Mittels CSS lassen sich die Unterpunkte via display:none; verstecken. Dann muss man eigentlich nur noch festlegen, dass beim hover-Effekt über die obere “menu”-Klasse die Liste der Unterpunkte doch wieder sichtbar wird. Das ganze sieht dann vereinfacht so aus:
.menu ul {
display:none;
}
.menu:hover ul {
display:block;
}
Und im html-Teil:
<div class="menu">
<h2>Überschrift</h2>
<ul>
<li>1. Eintrag</li>
<li>2. Eintrag</li>
</ul>
</div>
Dann fehlt eigentlich nur noch die grafische Aufwertung..
Transparenz
Ein Teil der grafischen Aufwertung war sicherlich die Transparenz, die eigentlich nur in Firefox zu sehen ist. Ein Dank an das Grafik-Blog, das mich darauf gebracht hat. Die Transparenz funktioniert eigentlich mit dem IE auch, allerdings wird ja das Untermenü im IE nicht angezeigt, weshalb das für ihn keine Rolle spielt. Ich habe den Eintrag für den IE trotzdem dringelassen.. Hier der code zum Transparentmachen:
.menu ul {
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity:0.9;
}
Es geht weiter
Der Grundgedanke hierbei war die Überlegung, wie man für einen Blog die Navigation zu ‘wichtigen’ Einträgen vereinfachen könnte. Ich bin immer noch auf der Suche nach weiteren Navigationsutensilien, die über das übliche hinausgehen. D.h. wer immer einen Virschlag, Kritik oder Anregung hat, bitte immer her damit… Auch bin ich an Seiten mit originellen Navigationssystemen interessiert. Wichtig hierbei ist, dass die Seite durchaus Inhalt enthalten sollen und nicht nur die Navigation! (das wäre sonst zu einfach..)
Sagt mir auch bitte bescheid, wenn die neue Navigation euch Probleme bereiten sollte…
Verwandte Beiträge
Tags: CSS, internet, Navigation, Persönlich, Programmierung, weblog, xhtml
Persönlich, Programmierung | 
Omar | 18. März 2006
Comments
Other Links to this Post
-
Christians Weltensichten — 18. März 2006 @ 13:27
-
Schwerdtfegers weblog » Update internet explorer — 18. März 2006 @ 17:18
-
Too Much Cookies Network » CSS-Pulldown auch für Internet Explorer — 16. Oktober 2006 @ 23:45
-
Too Much Cookies Network » Neues Design? — 4. November 2006 @ 18:51
RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI
By tarthang, 18. März 2006 @ 06:40
Ich habe das gerade in Safari (Apple Mac OS X 10.4.5) probiert und kann zwar die Transparenzen sehen, aber in den Menüs nicht navigieren. Zumal ich vor lauter Transparenz die Menüinhalte nicht lesen kann. Das solltest du also noch mal überarbeiten. (Ein Bildschrimfoto bekommst du per E-Mail.)
By sascha, 18. März 2006 @ 07:45
Über den Sinn von Pull-Down Menüs in einem Hypertextmedium kann man geteilter Meinung sein. Allerdings sind die Menüs transparent und die Einträge im unteren Bereich mit dem Safari nicht zu erkennen.
By Omar Abo-Namous, 18. März 2006 @ 09:48
Danke euch beiden. Das Bildschirmfoto ist angekommen tarthang. Könnte einer noch einmal bescheid geben? Ich habe jetzt den Menüs ein z-index gegeben. Wenn es immer noch nicht funktioniert, kann ich ja die Transparenz auch nur für den Firefox schalten. Aber ich finde es komisch, dass eine Sichtbarkeit von 0.9 (!!) so aussieht wie im screenshot..
@sascha: warum sollte in einem Hypertextmedium ein Pulldown-Menü keinen Sinn haben? Die Informationen stehen ja auch ohne das design zur Verfügung und sind durchaus strukturiert. Einziges Manko ist, dass nun im Quelltext der richtige Inhalt der Seite um einiges nach unten gerutscht ist..
By tarthang, 18. März 2006 @ 11:42
Jetzt geht es wunderbar. Die Tranzparenz ist da, aber zugleich so schwach, dass man die Inhalte gut erkennen kann. Dass es diese Memüs gibt, finde ich OK, da sie die Navigation verbessern.
@sascha: Noch ein Mac-User, wie nett.
By Omar Abo-Namous, 18. März 2006 @ 11:46
kann ich so frech sein, dich zu fragen, ob du mir noch zwei screenshots zuschicken könntest von diesem Artikel (mit pull-down) und eines von diesem hier? Bei letzterem hat firefox Probleme, das Menü vor das Objekt zu bringen..
Ich habe übrigens ausser dem z-index nichts geändert, also auch nicht den opacity-Wert…
By Elias Schwerdtfeger, 18. März 2006 @ 16:57
Obwohl ich so etwas nie machen würde, finde ich es sehr gelungen und frage mich, warum ich auf diese Nahe liegende Idee nicht schon selbst gekommen bin. Aber das habe ich mich schon so oft gefragt, wenn jemand etwas genial einfaches gemacht hat…
Mit dem Opera 8.51 funktioniert es im Prinzip auch, natürlich kommt der noch nicht mit der Transparenz klar. (Ich habe noch keine Beta vom 9er hier, da ich mir grundsätzlich keine Betas auf die Rechner spiele.) Allerdings “vergisst” der Opera (hier unter Linux 2.4.4, ja, das gibt’s noch) schon bei mäßig schnellen Mausbewegungen, das Menü wieder unsichtbar zu machen. So kann ich mit einem flotten Schlenker über die Menüleiste sämtliche Menüs aufklappen…
Mal schauen, wann die Browser alle CSS können…
By sascha, 18. März 2006 @ 17:48
@Omar: Sicherlich sind die Link vorhanden und werden nur versteckt. Allerdings ist mein empfinden bei einer solchen herangehensweise, dass irgend etwas mit den Strukturen nicht stimmt, da mehr Informationen auf der Seite sind als eigentlich nötig. Sicherlich kann man darüber geteilter Meinung sein. Im Für und Wider kann man einerseits argumentieren, dass das Informationsangebot auf den ersten Blick nicht überfrachtet ist. Auf den zweiten Blick wird allerdings das Erfassen dessen, was möglich ist wieder erschwert, da die nötigen Informationen dem Betrachter auf den ersten Blick verborgen ist.
@tarthang: Partiell. Manchmal Mac (iBook meiner Frau), meistens Linux (Job, eigene Maschinen), ganz selten Solaris oder Windows. Ich nehme das, was gerade greifbar ist.
By Omar Abo-Namous, 18. März 2006 @ 18:36
@sascha: ich weiss glaube ich noch nicht genau, was du meinst. Das ganze ist als eine grosse Liste gelöst (die übrigens schnell anders darstellbar ist..). So würde ich im Normalfall ein Menü strukturieren. Übrigens war mein erster Gedanke der, die einzelnen Punkte in der Sidebar ein- und ausklappbar zu machen (eigentlich selbe Technik), allerdings hat das nicht den Vorteil dieses Menüs, nämlich, dass das jetzige so kompakt ist!
Natürlich sind die Informationen dem Benutzer verborgen und eines stimmt allemal: Für motorisch gestörte Menschen ist das eine Qual, diese Menüs lange genug offenzuhalten, bis sie einen bestimmten Punkt angeklickt haben. Ausserdem habe ich ein Problem damit, dass im Quelltext der eigentliche Inhalt der Seite sehr weit nach unten gerutscht ist (das mag ich gar nicht), aber wie gesagt, ich bin auf der Suche nach ‘anderen’ Navigationssystemen.
@Elias: “Aber das habe ich mich schon so oft gefragt, wenn jemand etwas genial einfaches gemacht hat…” wow, ich fühle mich sehr geehrt. Versteh mich nicht falsch, ich find’s cool (sonst hätte ich nicht darüber geschrieben), aber ‘genial’.. wow. *verbeug* *verbeug*.. Das mit dem Offenhalten der Menüs taucht bei mir nur in der javascript-Version also unterm IE auf, sonst nicht.
“Mal schauen, wann die Browser alle CSS können…”
don’t hold your breath..
By Andrej, 23. Juni 2006 @ 04:26
Auch wenn der knappe Code so nicht ganz funktioniert hat und einiges an Nachforschung noch nötig war, die Inspiration war schon nachhaltig! Danke dafür! Bleibt ein Problem: wenn ich z.B. ein Frameset mit einer Menüleiste und einem Inhaltsframe darunter habe klappt das Menü nicht mehr auf, soll heissen es wird nicht über das untere Frame gelegt. Gibts dafür eine einfache Lösung die ich, weil zu simpel, einfach nicht finde?
By Omar Abo-Namous, 23. Juni 2006 @ 09:07
@Andrej:
Da kann ich leider nicht weiterhelfen. HTML-Elemente können nicht über den framerand hinausragen. Die Lösung könnte sein, das frameset zu vermeiden und stattdessen fr das Menü ein div zu verwenden mit position:fixed, dann bleibt es oben (bis auf ie<7)
By Franzi, 24. August 2006 @ 19:23
Hi
finde dein menü echt cool, nur funktioniert es bei mir nicht, Ich will weiteres, dass das Menü nach oben aufklappt, und nicht nach unten? kannst du mir da anregungen geben?
lg. Franzi
By Omar Abo-Namous, 24. August 2006 @ 19:56
@Franzi:
vielen Dank für die Blumen. Ich werde versuchen, demnächst ein wenig mehr über das pulldown /-up menü zu schreiben.
By Franzi, 24. August 2006 @ 21:10
hab ich das aber so grundsätzlich richtig verstanden:
ich bau im body-bereich einfach ein element ein, und gebe ihm eine klasse. Dann bau ich mir eine liste, (die grundsätzlich unsichtbar ist), und wenn die obere klasse via a:hover angesprochen wird, wandelt display: auf block.
Stimmt das so grundsätzlich?
lg. Franzi
By Omar Abo-Namous, 24. August 2006 @ 21:33
Das Prinzip besteht darin, dass zwei Elemente innerhalb des < div class=\\\"menu\\\">-Elements stecken. Ein Element (die h2-Überschrift) ist immer sichtbar. Das andere Element (ul) ist nur dann sichtbar, wenn die Maus über das Elternelement wandert (also entweder über h2 oder über ul). Soweit richtig.
Der Selektor \\\”:hover\\\” ist per css eigentlich nicht nur für a anwendbar. Wie man dem css-Teil weiter oben ansehen kann, muss kein Verweis-Element existieren, um einen Hover-Effekt zu selektieren. Deshalb ist ein Selektor (.menu:hover ul) möglich. Das geht nur leider nicht mit dem ie (<7.0).
hilft das etwas weiter?
By Franzi, 25. August 2006 @ 07:01
schon… aber was stimmt dann an meinem quelltext nicht?
.menu ul {display:none; }
.menu:hover ul {display:block; }
Überschrift
1. Eintrag
2. Eintrag
By Omar Abo-Namous, 25. August 2006 @ 09:06
Wahrscheinlich hast du nichts falsch gemacht. Mit welchem Browser versuchst du dir das anzuschauen? So funktioniert es nicht mit dem internet explorer. Um das mit dem ie zum laufen zu bekommen, musst du schon mit javascript arbeiten (siehe link weiter oben).
Wenn du dich ein wenig geduldest, ich habe vor, eine beispieldatei zu erstellen mit formatierungsvorschlägen (um bspw. ein pullup zu erstellen). Aber das kann frühestens heute abend passieren..
By Franzi, 25. August 2006 @ 15:58
antwort…hab das heute vormittag hinbekommen, und hab angefangen mir daraus ein templade zu basteln.
HTML ist weitgehend fertig.
Hier der Link:
Klick
By –=Franky=–, 28. September 2006 @ 10:53
Hallo miteinander,
ich bin genau auf der Suche nach solchen Beipielen.
Allerdings bleiben die Pulldowns bei mir IE6 geöffnet und schließen sich nicht mehr!??
Gibt es dafür noch einen Workaround?
Gruß
–=Franky=–
By Soophie, 4. Oktober 2006 @ 11:12
Mist! Ich wollte dich grad fragen, wie du die Transparenz für die Schrift wieder aufgehoben hast. Hast du ja nicht. Schade eigentlich. Bei einer größeren Transparenz sieht man auch die Schrift schlechter. Kann ich dich also nicht fragen, wie man die Transparenz wieder aufhebt. Oder weißt du es?
By Omar Abo-Namous, 4. Oktober 2006 @ 12:51
@Soophie: leider weiss ich das nicht. Es sollte ja eigentlich mit halbtransparenten png-Bildern möglich sein, aber das sollte man schnell vergessen, da der IE die png-Transparenzen überhaupt nicht richtig darstellen kann.
Es sollte ausserdem möglich sein, ein Unterelement anzulegen, das im Hintergrund bleibt, halbtransparent ist und die Hintergrundsfarbe darstellt. Da man aber dazu ein position:absolute und ein height:100% braucht, funktioniert das im IE auch nicht.
@Franky:
Beim ie wird teilweise das onmouseout-event nicht ausgelöst. Keine Ahnung warum..
By Soophie, 5. Oktober 2006 @ 16:09
Jaor habe ich gestern auch schon festgestellt
Musste eben doch hässliche Grafiken herhalten 
By Raoul, 20. Oktober 2006 @ 13:07
Verdammt ich hab mir gestern mühevoll mit Javascript genausoein Pulldownmenü zusammengebastelt, jetzt wollte ich dem ganzen auch noch eine Transparenz verleihen, stoße dabei auf deine Seite und muss sehen, dass jemand das Porblem viel besser gelöst hat als ich xD
Vielen dank auch, hab das alles gleich mal in die Tat umgesetzt!
Attribut an alle Coder:
Bitte schneidet eure Codes doch nicht extra auf den IE zu, meinetwegen für alle anderen Browser nur nicht für den IE, vielleicht erreichen wir ja so, dass letztendlich jeder die Einsicht erlangt und sich ‘nen ordentlichn Browser anschafft. Ich bins nämlich satt stundenlang zu coden bis etwas funktioniert und dann sehen zu müssen, dass der IE wieder nicht will.
Naja, hoffentlich werde ich jetzt nicht vom amerikanischen Geheimdienst um die Ecke gebracht, aber was …
Oh ich schweife vom Thema ab^^
Naja vielen dank nochmal
By Omar Abo-Namous, 20. Oktober 2006 @ 15:13
@Raoul: schau dir mal für den Internet Explorer die Erweiterung unter CSS-Pulldown auch für Internet Explorer an..
By Markus, 11. November 2006 @ 23:09
Hallo,
ich bin begeistert von Ihrem Pulldown-Menu. So sehr, dass ich zaghaft frage, ob Sie mir das Skript evtl. zur Verwendung für eine nicht kommerzielle Homepage zusenden könnten. Ich bin laienhafter und unbezahlter Webmaster der Abtei Neuburg und würde dieses Script wahnsinnig gerne in einer PHP-Struktur für das online-magazin verwenden.
Über eine Nachricht freue ich mich.
Viele Grüße
Markus
By Omar Abo-Namous, 11. November 2006 @ 23:40
@Markus: Jeder kann die hier dargestellte Technik verwenden. Ich kann Ihnen kein Skript zusenden, denn die Technik ist eigentlich schon im Artikel erklärt. Sie brauchen die richtigen HTML-Elemente (die Listen) und die entsprechenden css-Beschreibungen (alles oben im Artikel einsehbar).
Wenn Sie Fragen haben, kann ich gerne versuchen, diese zu beantworten.
By Björn, 21. November 2006 @ 19:54
Hallo allesamt,
ich finde deine CSS Menü auch sehr gelungen. Leider habe ich es nicht so weit geschafft, da ich andauernd mit dem Problem kämpfe, dass mein Pulldownmenü sich immer wieder schließt beim entlanggehen der einzelnen Menü Punkte(horizontal). Ich konnte mittlerweile herausfinden, dass es mit dem darunter liegendem Div Container zu tun hat, denn wenn ich diesen entferne funktioniert es wunderbar. Da ich aber nochlange nicht dran denke meine Idee aufzugeben;-), suche ich hier nach Rat.
Ich habe auch schon mit z-index und position rumgespielt leider ohne Erfolg.
Ich bedanke mich bei allen schon mal im voraus für Hilfestellungen.
Beste Grüße Björn
By Karsten Scholz, 9. Februar 2007 @ 15:07
Danke Sie haben mir den Tag gerettet. Ich muss bei einer Webseite das JS Menü austauschen. Und mache mir seit Stunden ein Kopf um es “Richtig zu machen”.
Ihre Lösung ist für mich die richtige.
…heute kann ich mal eher Feierabendmachen.
By Eva, 18. Februar 2007 @ 12:23
Hallo, ich finde das Pulldown-Menü klasse und konnte es erfolgreich umsetzen. Jetzt habe ich aber ein Problem mit dem IE 7. Das Menü klappt sich zwar auf, aber bleibt beim drüberfahren nicht offen, um die Links anzuklicken. Woran kann das denn nun liegen?
(Hier ist die Seite: http://www.em-klein.de/haus-lauer)
Wenn ich den IE Hack von 6 auf 7 ändere, wird das Menü wieder zweimal angezeigt… Muß ich für den IE 7 nun einen eigenen Hack schreiben? Wie muß denn der dann aussehen?!? Danke für die Hilfe
By Eva, 18. Februar 2007 @ 13:42
Ich habe es über die folgende Seite herausgefunden.
Der Stern-HTML-Hack wird von IE 7 nicht interpretiert, allerdings der Nachbarschafts-Hack mit / *+HTML /
Viele Grüße Eva
By bjoernmadh, 28. März 2007 @ 11:42
Hallo, finde so eine Art von Navigation hervoragend. Bin für meine Seite noch auf der Suche nach ner Navigation für Frames, damit ich bei Änderungen nur die nav.htm (Datei mit der Navgation; TopFrame) ändern muss. Bisher habe ich aber noch nichts gefunden, da sich der MainFrame immer über die Navigation legt.
Oder gibt es hier ne einfachere Lösung?
By Omar Abo-Namous, 28. März 2007 @ 13:28
@bjoernmadh: HTML-Elemente können nicht über Framegrenzen hinausragen. Die Alternative besteht darin, keine Frames zu benutzen, sondern eine Datei (das menü) in alle möglichen Dokumente einzubinden. Dazu eignet sich entweder eine Scriptsprache auf dem Server (php, asp) oder SSI (Serverside includes).
Von Frameseiten würde ich im Allgemeinen abraten.
By Noreya, 24. April 2007 @ 16:52
Hi,
also ich finde das Menü sehr schön. Was mich wundert ist,daß einige hier mit dem IE6 Probleme haben / hatten. Bei mir macht er (ausnahmsweise!) genau das, was er soll. Hält die Menüs offen und schließt sie korrekt, Transparenz ist da, man kann alles sehr gut lesen, usw. usf..
Echt cool. Danke.
Noreya