Das Dropdown-Menü wird in meiner Entwicklung häufig auftreten, aber kein Projekt muss neu geschrieben werden. Obwohl es einfach, aber sehr problematisch ist, es zu ändern, bin ich immer noch relativ faul. Heute habe ich Zeit, die Menüs in meiner vorherigen Projektentwicklung zu organisieren und eine allgemeine Version zu schreiben. Ich muss in Zukunft nicht so mühsam sein.
Merkmale
Das heute zusammengestellte Menü wurde von JQuery+CSS mit den folgenden Eigenschaften entwickelt:
1. Starke Vielseitigkeit
Es gab ein Problem mit einem Dropdown-Menü, das ich zuvor verwendet habe, und die Hauptnavigation und das Untermenü müssen separat eingestellt werden. Das Menü der zweiten Ebene lautet beispielsweise Class = "First_Menu", das Menü der dritten Ebene lautet Class = "Second_Menu" ... und so weiter. Es gibt ein Problem mit dieser Schreibmethode, nämlich, dass es für Programmierer, die die Schleifenausgabe ausführen, nicht förderlich ist. Dieses Menü muss nur einen CSS-Stil einführen, ohne ein Menü mit mehreren Ebenen zu definieren.
2. Schöne automatische Anrufanweisungen
In der Vergangenheit würden wir dem Dropdown-Menü manuell eine Dropdown-Klasse hinzufügen. Jetzt müssen wir nur den Stil des Dropdown-Effekts im CSS definieren, und der Code sucht automatisch nach dem Dropdown-Menü und fügt Anzeigenpfeile hinzu.
3. Einfacher Anruf
Die Ausgangsliste der Programmierer ist einfach und erfordert nicht viel Beurteilung. Rufen Sie einfach die Menüdaten rekursiv auf.
erreichen
1. HTML -Code
Zunächst geben wir Menüdaten auf der Seite aus, die aus UL und Li besteht, um eine Menüliste zu erstellen. Der spezifische Strukturcode lautet wie folgt:
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Menü eins </a> <ul> <li> <a href = "#"> Rock Coaster </a> </li> <li> <a href = "#"> vulkaner#"> Bird </a> </li> </li> </li> <li> <a href = "#"> Menü zwei </a> <ul> <li> <a href = "#"> über uns </a> <ul> <li> <a href = "#"> Geo -Geo </a> <li> <a href = "#"#"#"> fliege Pigeon. href="#">Birth and Eternal</a></li> <li><a href="#"> href="#">Successful</a></li> </li> </li> <li><a href="#">Database</a> <ul> <li><a href="#">Database table</a></li> <li><a href="#">Data encryption</a></li> <li><a href="#">Data modeling</a></li> </li> </li> <li><a href="#">C camera</a></li> </li> </li> </li> <li><a href="#">Test products</a></li> </li></ul>
Einige grundlegende HTML -Codes sind einfach und müssen die Bedeutung des Codes nicht erklären. Sie betonen die Codestruktur: ob die Menüs der zweiten Ebene, die dritte Stufe oder mehrere Stufe hauptsächlich verschachtelt sind. Der Stylesheet -Name ist ebenfalls sehr einzeln, und das Untermenü ist der "sub_menu" -Stil, der für Programmcode -Loop -Anrufe sehr förderlich ist.
2. CSS -Stil
Der CSS -Style -Code ist ebenfalls sehr einfach, der spezifische Code lautet wie folgt:
a {Textdekoration: Keine; } ul, li {Listenstil: Keine; Rand: 0; Polsterung: 0; }/*Definitionsmenü*/. Menue li {Hintergrund:#111; Farbe: #fff; Höhe: 30px; Zeilenhöhe: 30px; Position: Relativ; float: links; Rand-Rechts: 5px; Breite: 100px; Text-Align: Mitte; Schriftfamilie: Arial, Helvetica, Sans-Serif; } .Mue li a {color: #fff; Schriftgröße: 14px; Anzeige: Block; }/* Dropdown-Menüstil*/ul.sub_menu {Position: absolut; Breite: 100px; Anzeige: Keine; Z-Index: 999; } .Mue li ul.sub_menu li {Hintergrund: keine; Farbe:#555; Schriftgröße: 12px; Border-Bottom: 1PX #333 Solid; Position: Relativ; Breite: 100px; Höhe: 30px; } .Mue li ul.sub_menu li.last {Border-Bottom: Keine; } /*js wird diese Klasse zum letzten Li hinzufügen, entfernen Sie den Grenzflächen-Effekt* /. Menue li ul.sub_menu li a {Hintergrund:#222; Farbe:#888; Anzeige: Block; Höhe: 30px; } .Mue li ul.sub_menu li a: schwebe,. Hintergrund: URL (Arrow.png) No-Repeat Right; Padding-Right: 15px;}/*Der Hauptnavigationspfeil ist unten*/. Menue li a.hasmenu {Hintergrund: URL (Pfeil.png) No-Repeat Right; Padding-Right: 15px; Hintergrundposition: rechts -30px;}/*Der Dropdown-Menü Pfeil ist richtig No-Repeat Right Top; Farbe: #ffff;}Hier werde ich nur zwei Vorsichtsmaßnahmen betonen:
1. Der Unterschied zwischen absolut und relativ in der Position
Absolute: Absolute Positionierung, CSS ist als "Position: absolut" geschrieben, und seine Positionierung wird in zwei Situationen unterteilt, wie folgt:
A. Wenn oben, rechts, unten und links nicht festgelegt sind, ist der Standard für den ursprünglichen Punkt auf der Grundlage des "Originalpunkts des übergeordneten Bereichs des Inhaltsbereichs".
B. Es gibt Fälle, in denen oben, rechts, unten und links eingestellt sind. Es gibt zwei Situationen wie folgt:
(1). Das Elternteil hat kein Positionsmerkmal, und die obere linke Ecke des Browsers (d. H. Körper) ist als "ursprünglicher Koordinatenpunkt" positioniert. Die Position wird durch die oberen, rechten, unten und linken Attribute bestimmt.
(2). Der übergeordnete Position hat ein Positionsattribut, und der "Koordinatenpunkt des Elternteils" ist der ursprüngliche Punkt.
Relativ: Relative Positionierung, CSS wird als "Position: Relativ" geschrieben, und bezieht sich auf den "Inhaltsbereich des Elternbereichs" als ursprünglicher Punkt und ohne Elternteil des "Inhaltsbereichs Originalpunkt" des Körpers als ursprünglicher Punkt. Die Position wird durch die oberen, rechten, unten- und linken Attribute bestimmt und hat die Funktion, "Dehnung oder Beschäftigungshöhe" zu erhalten.
Die obigen zwei Unterschiede sind sehr wichtig und eine sehr häufige Technik. Sie müssen sie unterscheiden. Ich habe viel Zeit in der Entwicklung verschwendet und Probleme gefunden. Tatsächlich wird es durch diese beiden Attribute verursacht.
2. Verwenden Sie Hintergrundposition
Um die Geschwindigkeit der Website zu verbessern und das Website -Management zu erleichtern, legen wir manchmal einige häufig verwendete kleine Bilder auf einem großen Bild. Wenn CSS entsprechende kleine Bilder benötigt, kann dies durch diese Methode erreicht werden. Solange wir verstehen, was es bedeutet, ist es sehr bequem anzurufen. Diese Methode erklärt, dass der weiße Punkt die Bildabfangfunktion ist und die Verwendungsdetails wie folgt sind:
Grammatik:
Hintergrundposition: Länge || Länge
Hintergrundposition: Position || Position
Wert:
Länge: Prozent | Der Längenwert, der aus schwimmenden Punktzahlen und Einheitskennung besteht.
Position: oben | Mitte | unten | links | Mitte | Rechts
veranschaulichen:
Legt oder ruft den Hintergrundbild des Objekts fest. Die Hintergrund-Image-Eigenschaft muss zuerst angegeben werden. Diese Attributpositionierung wird nicht von den Patch -Attribut (Polching) des Objekts beeinflusst. Der Standardwert ist: 0% 0%. Zu diesem Zeitpunkt wird das Hintergrundbild in der oberen linken Ecke des Inhaltsbereichs positioniert, in dem das Objekt keine Patches (Polsterung) enthält. Wenn nur ein Wert angegeben wird, wird der Wert für die horizontalen Koordinaten verwendet. Die Ordinate wird auf 50%in Verzug gebracht. Wenn zwei Werte angegeben werden, wird der zweite Wert für die Ordinate verwendet. Wenn der Wert auf die rechte Mitte festgelegt ist, wird das Hintergrundbild nach rechts überschreibt, da der Wert des horizontalen Achse den Mittelwert überschreibt. Hier sind einige Gleichungen
Oben links ist links oben äquivalent zu 0% 0%.
Top, Top Center, Mitte Top entsprechen 50% 0%.
Ganz oben, oben rechts entspricht 100% 0%.
Links, linke Mitte, Mitte links entspricht 0% 50%.
Center, Center Center entspricht 50% 50%.
Rechts, rechts Mitte, Mitte rechts entspricht 100% 50%.
Unten links, linker unten entspricht 0% 100%.
Unten, unterer Mitte, Mitte unten entspricht 50% zu 100%.
Unten rechts, rechts ist der Boden zu 100% 100% äquivalent
3. JS -Code
Dieses Menü basiert auf JQuery. Zuerst müssen Sie die Jquery-Code-Basis vorstellen und dann den folgenden JS-Code schreiben, um das Dropdown-Menü zu implementieren.
<script src = "js/jQuery.min.js"> </script> <script> $ (Dokument) .Ready (function () {// Setzen Sie das Standard -Highlighting für die Navigation nichts mit diesem Menü $ ("ul.mue li.mue_li: EQ (0). Entfernen des letzten Unterstrichs $ (". if ($ (this) .find ("ul"). länge! Menü.Find ("ul.sub_menu: First"). submenu.css ({links: "100px", top: "0px"}) $ (". sub_menu li"). Hover (function () {$ (this) .find ("a: First"). AddClass ("jetzt"). $ (this) .find ("A: First").In den obigen Schritten wird ein allgemeines Menü mit mehreren Ebenen realisiert. Der obige Code ist die Akkumulation meiner täglichen Entwicklung. Aufgrund meines begrenzten Niveaus kann es viele Fehler geben. Ich hoffe, meine Kollegen werden optimiertere Codes für meine Referenz kritisieren und korrigieren oder vorschlagen. Danke schön.
Der obige Implementierungscode des universellen Dropdown-Menüs für universelle Infinitus ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.