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

Dropdown-Menüs mit CSS

Jeder, der jemals Dropdown-Menüs erstellt hat, ist mit der Anzahl der dafür erforderlichen Skripte vertraut. In der Zwischenzeit können Sie mithilfe von gut strukturiertem HTML-Code und einfachen CSS-Regeln ein nettes Dropdown-Menü erstellen, das einfach zu ändern und zu ergänzen ist. Gleichzeitig funktioniert es in einer Vielzahl von Browsern, einschließlich Internet Explorer. Und am wichtigsten für Sie, Fans von "sauberem" Code - kein JavaScript! (In der Tat wird ein kleines Skript benötigt, aber nicht für das, was Sie dachten.)

Hier ist ein Beispiel für das aktuelle Menü

Erstellen Sie ein Menü

Die erste und wichtigste Etappe bei der Erstellung unserer Speisekarte ist der Aufbau seiner Struktur. Am besten verwenden Sie eine unnummerierte Liste, in der Untermenüs platziert sind, die als Listen innerhalb der Elemente der übergeordneten Liste fungieren. Klingt das abstrus? 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>

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

Schönheit bringen

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.

Als Erstes entfernen Sie die Einzüge und Markierungen in der nicht nummerierten Liste und legen 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 sind sie standardmäßig vertikal angeordnet, was wir brauchen. Allerdings müssen wir den Wert für die Position als relativ festlegen, und alle, weil wir relativ zu ihnen müssen, um das Untermenü absolut zu positionieren.

ul li {Position: relativ; }

Wir nehmen ein 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 Menüpunktes des Vorfahren eindeutig positionieren. Sie werden feststellen, dass ich das Attribut "left" auf 149px (ein Pixel weniger als die Breite des Elternpunkts) eingestellt habe. Dadurch kann das Untermenü das Hauptmenü überlappen, ohne dass ein doppelter Rahmen erstellt wird. (Sie werden verstehen, was ich meine, etwas später.)

Außerdem müssen wir das Attribut "display" auf "none" setzen, da wir das Untermenü beim Öffnen der Seite nicht sehen wollen.

Nun, wir haben jetzt ein Skelett , aber es sieht immer noch unscheinbar 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 die Links nach meinem Geschmack angewendet, aber sie können leicht zu denen, die Sie mögen geändert werden. Es ist wichtig, dem Attribut "display" den Wert "block" zuzuweisen, da jeder Link den gesamten ihm zugewiesenen Speicherplatz in dem Listenelement belegen soll, das ihn enthält.

Es sieht also besser aus , obwohl Internet Explorer-Benutzer für Windows möglicherweise nicht mit Ihnen übereinstimmen. Leider versteht IE Win 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 eng aneinander 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 angewendet, der diese Regeln von allen Browsern außer IE Win ausblendet. Großartig. Beachten Sie, dass die Höhenregel hinzugefügt wurde: 1%. Leider (wieder!), Mit einem Fehler kämpfend, stolperten wir auf einen anderen, mit dem wir einen Wert für das "height" Attribut setzen müssen, damit die Links als Blockelemente angezeigt werden.

Beachten Sie auch, dass wir vergessen haben, den Menüblock zu "schließen". Fügen Sie jedem Element der Liste ein zusätzliches unteres Limit hinzu. Also, hier ist die vollständige Liste der Stile 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 uns funktionieren

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

li: hover ul {Anzeige: Block; }

Voilà! Und hier ist es - unsere Speisekarte - in Aktion.

"Yo-meins! Es funktioniert!" Einer von euch wird schreien. - "Wow!"

Okay, gut, aber verdammt IE / Win wieder brach all die Schönheit - will nicht tun, was er sagt. Er versteht die Pseudo-Klasse: Hover nur für das <a> -Tag - also li: Hover, an dem das Aussehen des Untermenüs gebunden ist, sagt ihm nichts.

Ein JavaScript-Droplet wird IE zum Leben erwecken (der Zeilenumbruch ist mit einem " " -Symbol gekennzeichnet - Ed.):

  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 außerdem JavaScript mit unserer Hauptliste verknüpfen und folgendes hinzufügen:

<ul id = "nav">

Ich hoffe, dass alle von euch eine vereinfachte Version des aktuellen Menüs sehen können .

Springmenü in IE5.01 für Win

IE5.01 für Windows-Benutzer wird feststellen, wie das Menü springt, wenn Sie den Mauszeiger über eines der Listenelemente bewegen. Das Problem lässt sich einfach lösen, indem wir Änderungen an unserem vorherigen 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 * /

Mysteriöser Bug der sechsten Version von IE ...

Während ich an dem Artikel arbeitete, entdeckte ich einen seltsamen Fehler, der, wie mir scheint, nur in IE6 beobachtet wird. Für "li a" müssen Sie den Hintergrund einstellen, 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 sie anklicken können. Es ist seltsam! Versuche es selbst zu sehen.

Erstellen Sie Ihr eigenes Menü

Das ist alles! Eine Methode, die nicht den Standards widerspricht, um schöne horizontale Drop-Down-Menüs zu erstellen. Alles, was Sie tun müssen, ist ein paar Ihrer Stile für den Hover hinzufügen, erstellen Sie Ihr eigenes Menü. Um Ihrer Phantasie einen Schub zu geben, habe ich ein paar mehr Striche in das Menü eingefügt. Viel Spaß!