This page has been robot translated, sorry for typos if any. Original content here.

CSS Dropdown-Menüs

Jedem, der Dropdown-Menüs erstellt hat, ist bekannt, wie viele Skripts dafür benötigt werden. In der Zwischenzeit können Sie mithilfe von gut strukturiertem HTML-Code und einfachen CSS-Regeln ein nettes Dropdown-Menü erstellen, das leicht zu ändern und zu ergänzen ist. Gleichzeitig funktioniert es in vielen Browsern, einschließlich Internet Explorer. Und das Wichtigste für dich, Fans von "sauberem" Code - kein JavaScript! (Eigentlich wird noch ein kleines Skript benötigt, aber überhaupt nicht für das, was Sie dachten.)

Hier ist ein Beispiel für das aktuelle Menü.

Erstellen Sie ein Menü

Der erste und wichtigste Schritt bei der Erstellung unserer Speisekarte ist der Aufbau seiner Struktur. Am besten verwenden Sie eine unnummerierte Liste, die Untermenüs enthält, die als Listen innerhalb der Elemente in der übergeordneten Liste fungieren. Sound abstruse? In der Tat ist es sehr einfach:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">WebDesign</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">DomainNames</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul>

Hier ist es: einfacher HTML-Code, zugänglich und leicht zu bearbeiten.

Induzieren Sie Schönheit

Schauen Sie sich das obige Beispiel an. Sie werden eine ziemlich langweilige Liste von Gegenständen sehen. Und ich habe dir versprochen, dass er niedlich sein wird! Lass uns ein paar Stile hinzufügen.

Entfernen Sie zuerst die Einzüge und Markierungen in der nicht nummerierten Liste und legen Sie dann die Breite der Menüelemente fest.

ul {Marge: 0; Auffüllen: 0; Listenart: keine; Breite: 150px; }

Jetzt müssen wir die Position der Listenelemente festlegen. Zum Glück werden sie standardmäßig vertikal angeordnet, was wir brauchen. Allerdings müssen wir den Wert für die Position als relativ festlegen, da wir das Untermenü absolut relativ zu ihnen positionieren müssen.

ul li {Position: relativ; }

Nimm das Untermenü. Wir möchten, dass jedes Untermenü rechts vom übergeordneten Menüelement erscheint, wenn sich der Cursor über diesem Element befindet.

li ul {Position: absolut; links: 149px; oben: 0; Anzeige: keine; }

Mit den Attributen "links" und "oben" können wir jedes Untermenü innerhalb des Ahnen-Menüpunktes absolut positionieren. Sie werden feststellen, dass ich das Attribut "left" auf 149px (ein Pixel weniger als die Breite des übergeordneten Elements) eingestellt habe. Dadurch kann das Untermenü das Hauptmenü überlappen, ohne dass ein doppelter Rahmen erstellt wird. (Versteh, wovon ich später spreche.)

Wir müssen auch das Attribut "display" auf "none" setzen, da wir beim Öffnen der Seite kein Untermenü sehen wollen.

Nun, wir haben jetzt einen Rahmen , aber er sieht immer noch unauffällig aus. Lassen Sie uns die Stile für die Links festlegen.

ul li a {Anzeige: Block; Textdekoration: keine; Farbe: # 777; Hintergrund: #fff; Auffüllen: 5px; Grenze: 1px fest #ccc; Grenze-unten: 0; }

Ich habe Stile auf Links angewendet, die du magst, aber du kannst sie ganz einfach zu denen ändern, die du magst. Es ist wichtig, dem Attribut "display" das Attribut "display" zuzuweisen, da jeder Link den gesamten reservierten Platz innerhalb des Listenelements einnehmen soll, das ihn enthält.

Es sieht also bereits besser aus , obwohl Internet Explorer-Benutzer für Windows möglicherweise nicht mit Ihnen übereinstimmen. Leider versteht IE Win die Zeilenumbrüche zwischen Links in unserem schön gestalteten HTML-Code als leeren Platz. Aus diesem Grund sehen Sie in IE, dass die Links nicht genau zueinander passen. Dieser IE-Bug kann jedoch umgangen werden.

/ * IE reparieren. Aus dem IE Mac verstecken * / * html ul li {float: left; } * html ul li a {Höhe: 1%; } / * Ende * /

Oben haben wir den Holly-Hack-Trick angewandt, der diese Regeln von allen Browsern außer IE Win ausblendet. Großartig Beachten Sie, dass die Höhenregel hinzugefügt wurde: 1%. Unglücklicherweise (wieder!) Kämpften wir mit einem Fehler auf einen anderen, um zu bekämpfen, was wir brauchen, um einen Wert für das "height" Attribut zu setzen, so dass die Links als Blockelemente angezeigt werden.

Beachten Sie auch, dass wir vergessen haben, den Menüblock zu "schließen". Fügen Sie jedem Element in der Liste eine weitere Untergrenze hinzu. Also, hier ist eine vollständige Liste von Stilen für ul:

ul {Marge: 0; Auffüllen: 0; Listenart: keine; Breite: 150px; Grenze-unten: 1px fest #ccc; }

Alles ist gut geworden, und jetzt kann jeder ein schönes, aber nicht funktionierendes Menü sehen .

Lass es funktionieren

Und jetzt - am meisten Spaß. Wir müssen Untermenüs in dem Moment erscheinen lassen, in dem sich der Cursor über dem Listenelement befindet.

li: hover ul {Anzeige: Block; }

Voila! Und hier ist es - unsere Speisekarte - in Aktion.

"Yo-meins! Es funktioniert!" - Jemand wird schreien. - "Großartig!"

Gut, gut, aber verdammt IE / Win wieder brach all die Schönheit - will nicht tun, was er gesagt wurde. Er versteht die Pseudo-Klasse: hover nur für das <a> -Tag - also li: Hover, an den die Darstellung eines Untermenüs gebunden ist, bedeutet ihm nichts.

Ein Tropfen JavaScript wird IE zum Leben erwecken (Zeilenumbruch ist mit " » "- Ed.) Markiert:

  startList = function () {if 
 (document.all && document.getElementById) {navRoot = 
 document.getElementById ("nav");  für (i = 0; i <navRoot.childNodes.length; i ++) { 
 node = navRoot.childNodes [i];  if (node.nodeName == "LI") { 
 node.onmouseover = function () {this.className + = "über";  } 
 node.onmouseout = function () {this.className = this.className.replace " (" über "," ");  }}}}} 
 window.onload = startList; 

Also sind die Regeln für den Hover:

li: hover ul, li.über ul {Anzeige: Block; }

Wir müssen auch JavaScript mit unserer Hauptliste verknüpfen, indem wir Folgendes hinzufügen:

<ul id = "nav">

Ich hoffe, dass, unter Berücksichtigung all der oben genannten, jeder von euch in der Lage sein wird, eine vereinfachte Version des aktuellen Menüs zu sehen .

Springt Menü in IE5.01 für Win

IE5.01-Benutzer für Windows werden feststellen, wie das Menü springt, wenn Sie den Mauszeiger über ein Element in der Liste bewegen. Das Problem lässt sich einfach lösen, indem wir Änderungen an unserem früheren Trick vornehmen:

/ * IE reparieren. Aus dem IE Mac verstecken * / * html ul li {float: left; Höhe: 1%; } * html ul li a {Höhe: 1%; } / * Ende * /

Der mysteriöse Bug der sechsten Version von IE ...

Während ich an dem Artikel arbeitete, entdeckte ich einen seltsamen Fehler, der, glaube ich, nur in IE6 beobachtet wird. Für "li a" ist es notwendig, den Hintergrund einzustellen, ansonsten, wenn das Dropdown-Untermenü größer ist (in der Höhe) als das übergeordnete Menü selbst, dann werden einige der Links einfach vom Bildschirm verschwinden, bevor Sie darauf klicken können. Seltsam! Versuche es selbst zu sehen.

Erstellen Sie Ihr Menü

Das ist alles! Eine nicht standardmäßige Methode zum Erstellen schöner horizontaler Dropdown-Menüs. Sie müssen lediglich ein paar Ihrer Hover-Stile hinzufügen, um ein eigenes Menü zu erstellen. Um Ihrer Fantasie Auftrieb zu geben, habe ich der Speisekarte noch ein paar zusätzliche Details hinzugefügt. Viel Spaß!