KS Webdesign - Der Blog » drei Ebenen http://webdesign-passau.com/wordpress Wed, 18 Apr 2012 07:28:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Navi – Flyout 2 http://webdesign-passau.com/wordpress/navi-flyout-2/ http://webdesign-passau.com/wordpress/navi-flyout-2/#comments Thu, 03 Sep 2009 12:31:25 +0000 Klaus http://webdesign-passau.com/wordpress/?p=234 Weiterlesen →]]> 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:

Flyout-Komplex-Anfang

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:

Flyout komplex Zwischenstand

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:

Flyout komplex Fertig

Na also, geht doch! :-)

Inspiriert von:Fortgeschrittene CSS-Techniken

]]> http://webdesign-passau.com/wordpress/navi-flyout-2/feed/ 5