KS Webdesign - Der Blog » dropdown http://webdesign-passau.com/wordpress Wed, 18 Jan 2012 13:08:03 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Navi – Dropdown http://webdesign-passau.com/wordpress/navi-dropdown/ http://webdesign-passau.com/wordpress/navi-dropdown/#comments Thu, 20 Aug 2009 13:39:24 +0000 Klaus http://webdesign-passau.com/wordpress/?p=141 Weiterlesen →]]> Tutorial zur Erstellung eines einfachen Dropdown-Menüs mit XHTML/CSS und etwas Javascript für den IE 6.

Hier findest du die dropdown_anfang.htm zum Quelltext rauskopieren.

Im Browser schaut es so aus:

Dropdown Anfang

Die XHTML-Struktur des Menüs ist folgende:

  • <ul id="navi">
  • <li><strong class="aktiv">Startseite</strong></li>
  • <li><a href="#">Galerie</a>
  • <ul>
  • <li><a href="#">Fotos</a></li>
  • <li><a href="#">Gemälde</a></li>
  • <li><a href="#">Grafiken</a></li>
  • </ul>
  • </li>
  • <li><a href="#">Kontakt</a></li>
  • <li><a href="#">Links</a>
  • <ul>
  • <li><a href="#">Gute</a></li>
  • <li><a href="#">Schlechte</a></li>
  • </ul>
  • </li>
  • <li><a href="#">Impressum</a></li>
  • </ul>

Die Untermenüs sind schon in die Menüliste eingeschachtelt. Zu beachten ist, das der Listenpunkt des Hauptmenüpunktes erst nach dem Submenü geschlossen werden darf. Den jeweils schließenden Hauptmenüpunkt habe ich fett hervorgehoben.

Die grundlegenden Formatierungen für die Links habe ich auch schon vorgenommen, damit wir uns ganz auf die Positionierung und Gestaltung der Submenüs konzentrieren können.

Los gehts! Bitte CSS ergänzen:

  • #topnavi {
  • float:left;
  • width:36em;
  • background-color:#f8f8cf;
  • }
  • #navi {
  • float:left;
  • width:100%;
  • }
  • #navi li {
  • float:left;
  • width:7.2em;
  • }
  • #textbereich {
  • clear:both;
  • }

Die Liste, alle Hauptmenüpunkte und der umgebende Container (#topnavi) werden gefloatet und im Textbereich wird gecleart, um den normalen Textfluß wiederherzustellen.

Das Ergebnis:

Dropdown Mitte

Bitte CSS ergänzen:

  • #navi li li {
  • float:none;
  • }
  • #navi li ul {
  • position:absolute;
  • left:-9999px;
  • }
  • #navi li:hover ul {
  • left:auto;
  • }

Der Float wird für die zweite Menüebene wieder aufgehoben, damit diese Links später untereinander stehen.

Die Liste der zweiten Ebene wird absolut positioniert und aus dem Bildschirm geschoben, damit sie die Umgebung nicht mehr beeinflusst und im Normalzustand nicht zu sehen ist.

Wenn ein Hauptmenüpunkt gehovert wird, springt das Submenü wieder in den sichtbaren Bereich, weil die Positionsangabe left:auto; definiert wurde.

Der optische Stand der Dinge:

Dropdown Fertig

Einwandfrei!

Und jetzt mal im IE 7 öffnen.

Das Submenü klappt nicht aus

Der IE7 leidet am CSS Popup Bug, der bestimmte Angaben für das gehoverte Element (hier li) benötigt, wenn sich dessen Nachfahren (hier ul) ändern sollen.

Außerdem tritt beim IE7 der Whitespace-Bug auf, d.h. zwischen den li-Elementen des Submenüs sind Lücken zu sehen. Das kommt daher weil die li-Elemente durch die Angabe einer Breite HasLayout haben, die Links jedoch nicht. Davon sind auch die älteren IE’s betroffen.

Bitte den Conditional Comment ergänzen:

  • <!--[if lte IE 8]>
  • <style type="text/css">
  • /* CSS Popup-Bug */
  • *+html #navi li:hover { text-indent: 0; }
  • /* Whitespace-Bug */
  • *+html #navi a { min-height: 0; }
  • /* HasLayout für die Links im IE 6 */
  • * html #navi a { height: 1px; }
  • </style>
  • <![endif]-->

Im IE 7 ist alles in Ordnung, aber was ist mit dem IE 6?

Das Submenü klappt immer noch nicht aus. Das liegt daran das der IE 6 :hover nur in Verbindung mit a kennt. Mit li:hover kann er nix anfangen.

Mit etwas Javascript bekommen wir das in den Griff. Damit ist es möglich den li-Elementen bei onmouseover eine Klasse .sfhover hinzuzufügen, die dann 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]-->

Bitte CSS ergänzen:

  • #navi li:hover ul,
  • #navi li.sfhover ul {
  • left:auto;
  • }

Jetzt ist auch im IE 6 alles in Ordnung.

Inspiriert von: Fortgeschrittene CSS-Techniken

]]> http://webdesign-passau.com/wordpress/navi-dropdown/feed/ 10