KS Webdesign - Der Blog » suckerfish http://webdesign-passau.com/wordpress Wed, 18 Jan 2012 13:08:03 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 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 Navi – Flyout 1 http://webdesign-passau.com/wordpress/navi-flyout-1/ http://webdesign-passau.com/wordpress/navi-flyout-1/#comments Wed, 02 Sep 2009 14:15:16 +0000 Klaus http://webdesign-passau.com/wordpress/?p=222 Weiterlesen →]]> 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:

Flyout-Menü Anfang

Die Quelltextstruktur der Navigation sieht so aus:

  • <div id="navi">
  • <ul id="navigation">
  • <li><a href="#">Browser</a>
  • <ul>
  • <li><a href="#">Firefox</a>&lt/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:

Flyout 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:

Flyout fast fertig

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

]]> http://webdesign-passau.com/wordpress/navi-flyout-1/feed/ 6