Drop-Down-Menüs mit CSS

Wer schon einmal hat Drop-Down-Menüs, vertraut mit, wie viel des Scripts erstellen ist hierfür erforderlich. Inzwischen eine gut strukturierte HTML-Code und CSS-einfache Regeln verwenden, können Sie einen schönen Drop-Down-Menü erstellen, die einfach zu ändern ist, und fügen Sie zu, und zugleich wird es in einer Vielzahl von Browsern, einschließlich Internet Explorer. Und das Wichtigste für Sie, die Liebhaber der "reinen" Code - kein JavaScript! (In der Tat, ein kleines Skript, noch benötigt, aber nicht für das, was Sie denken.)

Hier ist ein Beispiel für das aktuelle Menü

Erstellen Sie ein Menü

Der erste und wichtigste Schritt, um unser Menü zu schaffen ist der Aufbau seiner Struktur. Dies geschieht am besten eine ungeordnete Liste mit, die das Untermenü beherbergt erscheinen als Liste in ihrer übergeordneten Listeneinträge. Es klingt technisch und verwirrend? In der Tat ist es sehr einfach:

Hier ist sie: eine einfache HTML-Code ist verfügbar und leicht bearbeitet werden.

Wir richten die Schönheit

Schauen Sie sich den obigen Beispielen. Sie erhalten eine ziemlich langweilige Liste der Elemente zu sehen. Und ich verspreche Ihnen, dass es schön sein! Lassen Sie uns etwas Stil.

Der erste Schritt ist es, die Vertiefung und die Markierungen in die ungeordnete Liste zu entfernen, und die Breite der Menüpunkte definieren.

ul {margin: 0; padding: 0; list-style: none; width: 150px; }

Nun müssen wir die Position der Listenelemente zu setzen. Glücklicherweise sind sie vertikal standardmäßig angeordnet sind, das ist, was wir brauchen. Allerdings müssen wir den Wert für die Position als relativ zu setzen, und alles nur, weil wir müssen sie absolut relativ Untermenü positionieren.

ul li {position: relative; }

Nehmen Sie zum Untermenüs. Wir wollen jedes Untermenü auf der rechten Seite des übergeordneten Menü im Moment in diesem Punkt der Cursor angezeigt wird.

li ul {position: absolute; links: 149px; top: 0; display: none; }

Mit den Attributen von "links" und "oben", können wir absolut positionieren jedes Untermenü innerhalb des übergeordneten Menüpunkt. Sie werden feststellen, dass ich das Attribut "links" Wert auf 149px gesetzt (ein Pixel ist kleiner als die Breite des übergeordneten Artikels), ermöglicht es das Untermenü des Hauptmenüs überlappen, ohne einen doppelten Rahmen zu schaffen. (Verstehen Sie, was ich meine, ein wenig später.)

Wir müssen auch das Attribut "Anzeige" Wert "none" zuweisen, denn wir wollen das Untermenü nicht angezeigt, wenn die Seite geöffnet wird.

Nun, wir haben jetzt einen Rahmen , aber es sieht immer noch unattraktiv. Lassen Sie uns Arten als Referenz fragen.

ul li a {display: block; text-decoration: none; color: # 777; Hintergrund: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }

Ich bewarb mich auf die Links-Stil nach Ihren Wünschen, aber Sie können leicht diejenigen zu ändern, die Sie mögen. Es ist wichtig, das Attribut "Anzeige" Wert "Block" zuzuordnen, weil wir jedes Glied wollen alle den Raum innerhalb seiner enthält Listenelement vorgesehen besetzt.

So sieht es ein wenig besser , auch wenn Benutzer von Internet Explorer für Windows können Sie nicht zustimmen. Leider versteht IE Win Pausen zwischen den Verbindungen in unserem schön dekorierten HTML-Code als ein leerer Raum. Daraus können Sie im IE zu sehen, welche Hinweise auf eine andere nicht eng benachbart sind eins. Allerdings kann dieser Fehler um IE gearbeitet werden.

/ * IE Fix. Ausblenden von IE Mac \ * / * html ul li {float: left; } * Html ul li a {height: 1%; } / * Ende * /

Wir haben die Holly Hack Trick angewandt, die diese Regeln von allen Browsern aber IE Win versteckt. Ausgezeichnet. Beachten Sie, dass die Regel wurde hinzugefügt Höhe: 1%. Leider (wieder!), Mit einem Fehler Struggling, vytknulis wir zu einem anderen, mit dem Sie einen Wert für das Attribut "Höhe" festlegen möchten umgehen, dass als Block-Level-Elemente angezeigten Links.

Beachten Sie auch, dass wir die "close" Menüblock vergessen haben. Hinzufügen von weiteren an der unteren Grenze jeder Listenpunkt. So, hier ist die komplette Liste der Arten für die ul:

ul {margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }

Alles ging gut, und jetzt kann jeder die schöne, aber sehen nicht funktionierende Menü .

Make it work

Und jetzt - am meisten Spaß. Wir müssen sicherstellen, dass das Untermenü zu einem Zeitpunkt zu erscheinen, wenn der Cursor auf einem Listenelement ist.

li: hover ul {display: block; }

Voila! Und hier ist es - unser Menü - in Aktion.

"E-mine! Es funktioniert!" - Shouts jemand von Ihnen. - "Wow!"

Okay, in Ordnung, aber IE / Win wieder blutig brach die ganze Schönheit - ist nicht bereit, zu tun, was ihm gesagt wird. Er versteht: schweben Pseudo-Klasse nur für <A> ist - so das li: schweben, die wir das Aussehen des Untermenüs gebunden, es nicht über sich sprechen.

IE JavaScript Tropfen Blei Sinne (Bruchlinien , die mit " '" - Hrsg.):

  Startliste = function () {if 
 (Document.all && document.getElementById) {navRoot = 
 document.getElementById ( "NAV");  for (i = 0; i <navRoot.childNodes.length; i ++) { 
 node = navRoot.childNodes [i];  if (node.nodeName == "LI") { 
 node.onmouseover = function () {this.className + = "over";  } 
 node.onmouseout = function () {this.className = this.className.replace »(" over "," ");  }}}}} 
 window.onload = Startliste; 

die Regeln für den Schwebe So wie folgt:

li: hover ul, li.over ul {display: block; }

Wir brauchen auch weiterhin die JavaScript mit unserer Liste zu verknüpfen und fügte hinzu, dies:

<Ul id = "nav">

Ich hoffe, alle oben genannten Anwendungen unter Berücksichtigung, die alle Sie sehen können , eine vereinfachte Version des aktuellen Menüs .

Springen Sie in das Menü IE5.01 für Win

IE5.01 für Windows-Anwender werden feststellen, ist das Menü um springt, wenn Sie über eines der Elemente in der Liste schweben. Das Problem wird durch Änderungen in unserem letzten Trick leicht zu lösen:

/ * IE Fix. Ausblenden von IE Mac \ * / * html ul li {float: left; Höhe: 1%; } * Html ul li a {height: 1%; } / * Ende * /

Mysterious Bug sechste Version von IE ...

Während auf dem Artikel arbeiten, fand ich eine seltsame Fehler, die, glaube ich, nur in IE6 beobachtet wird. Für brauchen "li a" Hintergrund zu setzen, oder wenn der Pull-Down-Untermenü wird als die aktuelle übergeordnete Menü mehr (Höhe) sein, dann Teil des Referenz wird einfach vom Bildschirm selbst verschwinden, bevor Sie auf sie klicken. Seltsam! Probieren Sie es selbst zu sehen.

Erstellen Sie Ihr eigenes Menü

Das ist alles! Nicht im Gegensatz zu Standard-Methode der schönen horizontalen Dropdown-Menüs zu erstellen. Alles, was Sie tun müssen - etwas Art Ihrem schweben hinzufügen, Ihr Menü zu schaffen. Kick-Start Ihrer Phantasie, fügte ich ein paar Striche im Menü . Viel Spaß!