- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Navi – Flyout 1
Bei einem einfachen Layout mit zwei Spalten soll die Navigation in ein Flyout-Menü umgewandelt werden
Hier findest du die flyout_einfach_anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:
Die Quelltextstruktur der Navigation sieht so aus:
<div id="navi"><ul id="navigation"><li><a href="#">Browser</a><ul><li><a href="#">Firefox</a></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>
Der Menüpunkt Browser hat drei Unterpunkte:
Firefox, Opera und Safari.
Der Menüpunkt Textprogramme zwei Unterpunkte:
MS Word und Open Office
Die Unterpunkte der verschachtelten Liste sollen erst beim Hovern der Hauptpunkte nach links ausklappen und dabei den Hauptpunkt etwas überlappen.
Bitte CSS ergänzen:
/* Das Submenü wird ausgeblendet */ul#navigation ul {position: absolute;left:-9999px;}/* Das Submenü wird eingeblendet */ul#navigation li:hover ul {left:120px;top:12px;}
Das Untermenü wird aus dem sichtbaren Bereich geschoben und beim Hovern des entsprechenden Hauptmenüpunktes wieder ins Bild geschoben.
Wir müssen einem Element position:relative; zuweisen, da sonst body der Bezugspunkt für die absolute Positionierung ist.
Damit die dem Submenü nachfolgenden li‘s nicht das Submenü überlagern bekommt nicht li die relative Positionierung sondern li:hover.
Bitte CSS ergänzen:
ul#navigation li:hover {position:relative;}
Zwischenstand:
Das Submenü klappt an der gewünschten Position aus, aber wegen der absoluten Positionierung fällt das Submenü auf die Breite des Inhaltes zusammen und bei zwei Wörtern gibt es einen Umbruch.
Bitte CSS ergänzen:
ul#navigation ul {width:120px;}
Die Liste hat eine feste Breite bekommen, wodurch das Submenü nun wie gewünscht ausschaut.
Bitte CSS ergänzen:
ul#navigation a:hover {color:#fff;background-color:#d90000;}
a hat einen Hover-Effekt bekommen, allerdings verliert der Hauptmenüpunkt seinen Hoverstatus wenn der Mauszeiger zum Submenü wandert.
Bitte CSS ergänzen:
#navigation li:hover a {color:#fff;background-color:#d90000;}
Jetzt haben alle Submenüpunkte Hoverstatus, wenn ich einen Hauptmenüpunkt hover, weil ich per Nachfahrenselektor alle a‘s anspreche, die auf ein gehovertes li folgen.
Deshalb wird die zweite Menüebene nun extra eingefärbt und der Hovereffekt für die zweite Ebene vergeben.
Bitte CSS ergänzen:
/* Das Submenü wird eingefärbt */ul#navigation li:hover li a {color:#fff;background-color:#ef0ff7;}
/* Das Submenü bekommt den Hovereffekt */ul#navigation li li a:hover {color:#fff;background-color:#d90000;}
Momentaner Stand:
Soweit, sogut. Jetzt fehlen nur noch die Anpassungen für den IE 6/7.
Der IE 7:
Beim Hovern entstehen Lücken zwischen den Links und das Submenü springt immer wieder weg, wenn man nicht an der richtigen Stelle hovert. HasLayout für a löst das Problem.
Bitte den Conditional Comment ergänzen:
<!--[if lte IE 8]><style type="text/css">
*+html ul#navigation a {min-height:0;}</style><![endif]-->
Jetzt der IE 6:
Das Submenü klappt nicht aus, weil der IE 6 :hover nur in Verbindung mit a kennt.
Das Ausklappen des Submenüs wird mit Javascript erzwungen. Den li-Elementen wird bei onmouseover eine Klasse .sfhover zugewiesen, die per CSS angesprochen werden kann.
Bitte einen weiteren Conditional Comment hinzufügen:
<!--[if lt IE 7]><script type="text/javascript">// Son of Suckerfish Dropdowns// http://htmldog.com/articles/suckerfish/dropdowns/sfHover = function() {var sfEls = document.getElementById("navi").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script><![endif]-->
Alle Deklarationen wo li:hover steht wird durch die Klasse .sfhover ergänzt.
Bitte CSS ergänzen:
ul#navigation li:hover ul,ul#navigation li.sfhover ul {left:120px;top:12px;}
ul#navigation li:hover,ul#navigation li.sfhover {position:relative;}
ul#navigation li:hover a,ul#navigation li.sfhover a {color:#fff;background-color:#d90000;}
ul#navigation li:hover li a,ul#navigation li.sfhover li a {color:#fff;background-color:#ef0ff7;}
Jetzt ist zwischen den Listenpunkten noch ein Abstand und nur der Text reagiert auf das Hovern.
a braucht HasLayout. Da er min-height nicht kennt benötigt er durch eine Mindesthöhe anderweitig HasLayout.
Damit der Abstand zwischen den Listenpunkten verschwindet, braucht li eine IE-eigene Inline-Block-Darstellung.
Bitte den ersten Conditional Comment ergänzen:
<!--[if lte IE 8]><style type="text/css">* html ul#navigation a {height:1px;}* html ul#navigation li {display:inline;zoom:1;}</style><![endif]-->
Jetzt ist auch im IE 6 alles okay!
Inspiriert von:Fortgeschrittene CSS-Techniken
- Kategorien:
- Navigationen, XHTML/CSS
- Tags:
- flyout, IE6, menü, navi, suckerfish
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
Hallo Klaus,
Das Verfahren und die Anleitung dafür sind eine Wucht – vielen Dank dafür!
Hi Gaby,
danke für die Blumen.
[...] meinem letzten Artikel Navi – Flyout 1 habe ich beschrieben, wie man ein einfaches Flayout-Menü mit zwei Ebenen [...]
[...] this link: Navi – Flyout 1 Tags: cms, [...]