In meinem letzten Artikel Navi – Flyout 1 habe ich beschrieben, wie man ein einfaches Flyout-Menü mit zwei Ebenen erstellt.
Hier werde ich euch zeigen wie man eine dritte Ebene hinzufügt, d.h. ein Submenü bekommt ein weiteres Submenü, ein Sub-Submenü sozusagen.
Hier findest du die flyout_komplex_anfang.htm zum Quelltext rauskopieren.
Die Navi mit der eingefügten dritten Ebene schaut im Quelltext so aus:
<div id="navi"><ul id="navigation"><li><a href="#">Browser</a><ul><li><a href="#">Firefox</a><ul><li><a href="#">Firefox 1</a></li><li><a href="#">Firefox 2</a></li><li><a href="#">Firefox 3</a></li></ul></li><li><a href="#">Opera</a></li><li><a href="#">Safari</a></li></ul></li><li><a href="#">Betriebssystem</a></li><li><a href="#">Textprogramme</a><ul><li><a href="#">MS Word</a></li><li><a href="#">Open Office</a></li></ul></li><li><a href="#">Unfug</a></li></ul></div>
Im Browser sieht es so aus:
Beim Hovern des Hauptmenüpunktes klappt die dritte Ebene gleich mit aus, außerdem hat sie die gleiche Farbe wie die zweite Ebene.
Aber eins nach dem anderen!
Es muss beim Ausblenden der Submenüs explizit angegeben werden, das die übernächste und weitere Ebenen beim Hovern des Hauptmenüpunktes nicht angezeigt werden.
Bitte CSS ergänzen:
/* Dritte Menüebene wird ausgeblendet */ul#navigation ul,ul#navigation li:hover li ul,ul#navigation li.sfhover li ul {position: absolute;left:-9999px;width:120px;}
Okay, die zweite Ebene klappt nun aus, die Dritte hingegen nicht. Wir blenden sie wieder ein.
Bitte CSS ergänzen:
/* Dritte Menüebene wird eingeblendet */ul#navigation li li:hover ul,ul#navigation li li.sfhover ul {left:100px;}
Zwischenstand im Browser:
Mmmh, der Hover-Effekt der zweiten Ebene geht verloren, wenn der Mauszeiger über der dritten Ebene schwebt. Außerdem hat die dritte Ebene die gleiche Einfärbung wie die zweite Ebene.
Bitte CSS ergänzen:
/* Hovereffekt der zweiten Ebene; der auch beim Hovern der dritten Ebene erhalten bleibt */ul#navigation li li:hover a,ul#navigation li li.sfhover a {color:#fff;background-color:#d90000;}
/* Einfärben der dritten Ebene (Subsubmenü) */ul#navigation li li:hover li a,ul#navigation li li.sfhover li a{color:#fff;background-color:#336699;}
/* Die dritte Ebene bekommt den Hover-Effekt */ul#navigation li li li a:hover {color:#fff;background-color:#d90000;}
Stand im Browser:
Na also, geht doch! 
Inspiriert von:Fortgeschrittene CSS-Techniken
Hallo Klaus,
kann es sein, dass der Link zu deinem Quelltext flyout_komplex_anfang.htm nicht mehr funktioniert? Ich würde mir den nämlich gerne (noch mal) ansehen, da ich auch gerade an einem Menü mit drei Ebenen bastele. Allerdings soll die oberste Ebene horizontal sein.
Danke für’s Überprüfen, für die schöne Anleitung und viele Grüße!
Hi Martin,
umpf!
Habe dank deines Hinweises grade festgestellt, das ich beim Umstieg auf Win 7 Prof. 64Bit + Update auf WP 2.9.2 meinen Uploadsordner komplett zerschrotet habe.
D.h. Ordner neu erstellen und alle Grafiken/htm’s etc. noch mal entsprechend rüberkopieren und dann hochladen.
Ich kümmere mich sofort darum.
Danke für deinen Hinweis.
Gruß
Klaus
jetzt müßte wieder alles funktionieren!
Ja, prima. Jetzt sind ja auch noch ein paar Grafiken zum Text hinzu gekommen
Apropos Upload-Ordner: Hast du die Grafiken alle mit dem WordPress-Uploader hochgeladen?
Ich hatte bei mir mal Bilder per FTP hochgeladen, aber die waren dann in WP leider nicht in der Mediathek bzw. darüber auszuwählen.
Da es kein großes Problem war, habe ich dafür noch keine Google-Suche gemacht, es fiel mir gerade wieder ein. Wie hast du das denn jetzt gemacht? Die Grafiken müssen ja auch alle im richtigen Monatsordner landen, so wie bei dir z.B. uploads/2009/09
Nachträglich kann man mit dem WP-Uploader das Datum ja nicht mehr beeinflussen, da wir schon 2010/02 haben. Oder hat WP die Grafiken auch nach FPT-Upload erkannt, weil sie schon einmal bekannt waren?
Ist aber keine dringende Frage.
antworten tue ich aber trotzdem gerne.
Im WP-Editor erstelle ich nichts und meine Grafiken lade ich per FTP direkt in die entsprechenden Monatsordner.
Der visuelle Editor ist ausgeschaltet.
Den WP-Uploader benutze ich nicht.
Zuerst habe ich mir mit meinem Lieblingseditor (notepad++) eine test.htm gebastelt, um beim Artikelschreiben lokal überprüfen zu können, wie es online aussehen würde.
Nach Erstellen des Artikels benenne ich die test.htm in den Artikelnamen um, z.B. flyoutkomplex.htm.
Die Grafiken/Fotos bearbeite ich direkt mit Photoshop und passe sie an.
Auf meiner Festplatte habe ich einen Ordner WP-Artikel. Dort gibt es für jeden Artikel einen Ordner, in dem alle grafiken, anfangs.htm und die (umbenannte) test.htm sind.
In diesem Fall ist das sehr hilfreich gewesen, sonst hätte ich das alles nicht mehr rekonstruieren können.
In meinem lokalen Verzeichnis aller meiner Websites existiert auch der uploads-Ordner mit allen Unterordnern.
Da kopiere ich die Dateien aus meinem WP-Ordner hinein und lade sie hoch.
Danach kopiere ich den in meinem Lieblingseditor erstellten Quelltext zum Artikel in den HTML-Editor des Backends.
Noch alles richtig wieder einrücken und veröffentlichen.
Wenn du noch Fragen hast, kannst du mich gerne löchern.