Einführung: In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie ein sehr cooles, in drei Ebenen unterteiltes Standard-Schiebetür-Navigationsmenü erstellen. Von den Ideen, Prinzipien, Schritten und Methoden kann man sagen, dass „alles möglich ist“. Ich glaube, Sie werden es tun, nachdem Sie diesen Artikel gelesen haben. Sie können auch Ihr eigenes superschönes Standard-Navigationsmenü erstellen. Dieses Menü hat keine redundante Struktur und ist für die dynamische Datenausgabe geeignet. Es eignet sich sehr gut für den Einsatz in gewöhnlichen Projekten. In diesem Tutorial geht es um die Grundprinzipien von Schiebetüren. Ich glaube, es wird denjenigen Freunden helfen, die sich noch auf diesem Weg befinden! Sollten Fehler oder Probleme auftreten, können Sie diese natürlich gerne besprechen.
Das ideale Ziel dieses Navigationsmenüs ist es,
Lassen Sie uns dieses ideale Menü Schritt für Schritt umsetzen!
Ich sehe oft, wie viele Freunde Menüs in Foren erstellen, aber um ehrlich zu sein, entweder ist die Struktur überflüssig, oder sie haben eine Form, aber keinen Geist, oder sie haben Geist, aber kein Aussehen. Und was wir jetzt kreieren wollen, ist das beste Menü. Egal, ob Sie ein Neuling oder ein Veteran sind, in diesem Tutorial sollten Sie etwas Nützliches finden.
Die Struktur eines idealen Menüs sollte sauber, frei von Redundanzen und getrennt sein. Aus verschiedenen Gründen werden jedoch viele bedeutungslose Dinge hinzugefügt, und am Ende wird es immer weiter von „sauber“ entfernt sein. . Deshalb gibt es vor der Zusammenstellung eines Menüs bestimmte Grundsätze, die während des gesamten Produktionsprozesses beachtet werden müssen und nicht durch äußere Gewalt behindert werden dürfen.
Struktur:
Meiner Meinung nach sollte das ideale Standardmenü die folgende Struktur haben:
Die ursprüngliche Struktur des Menüs ist jetzt verfügbar. Sie können sehen, dass es keine bedeutungslosen Tags enthält. Werfen wir einen Blick in den Browser. Es ist nur ein Originaltext, wie die Speisekarte, die wir zum Bestellen von Speisen in einem Restaurant verwenden. Es ist wahrscheinlich einfacher, und vor jeder Speisekarte steht etwas . Ein kleiner Punkt! Oh mein Gott, wir sind so weit von unserer schönen Speisekarte entfernt!
Stil:
Nun, es ist nur ein Skelett. Lassen Sie es uns ein wenig verschönern und einige einfache Stile hinzufügen. Zumindest sollten wir die kleinen Punkte entfernen und es horizontal anordnen.
Okay, lasst uns etwas Stil hinzufügen!
Nun, sehen Sie, wir haben unser kleines Ziel erreicht.
Nachdem das Grundgerüst nun steht, besteht der nächste Schritt darin, jedem Menüpunkt schöne Kleidung hinzuzufügen.
Um die erste Anforderung zu erfüllen, müssen Sie zunächst einen schönen Knopf haben und selbst einen zeichnen. Oh, ich bin kein Künstler, das ist schwierig! Seien Sie jedoch nicht zu ungeduldig. Vielleicht hat jemand schon etwas Gutes gegoogelt und eines gefunden. (Die Tränen kommen ...) Quellcode der Schaltfläche: http://bbs.blueidea.com/thread-2860891-1-1.html
Mit dem Quellcode der entworfenen Schaltfläche wird der Designteil eingespart, was großartig ist. Um daraus jedoch eine Schaltfläche mit drei Zuständen zu machen, müssen wir diese Schaltfläche ändern. Haben Sie das siebte Ziel gesehen? Wir werden eine adaptive Schaltfläche erstellen, daher müssen wir diese Schaltfläche etwas bearbeiten.
Wir zeigen diese drei Schaltflächen als drei Zustände an: Wenn die Maus wegbewegt wird, nach dem Klicken und wenn die Maus nach oben bewegt wird, müssen Sie eine Schaltfläche aus der Mitte ausschneiden auf der linken Seite platziert, und das Bild auf der rechten Seite wird auf der rechten Seite platziert. Um sich an die Länge des Textes anzupassen, muss die Breite dieser Ebene etwas gedehnt werden. Dieses Bild hat jedoch einen sehr komplexen Schatteneffekt und kann nicht beiläufig gedehnt werden, da sonst der Effekt nicht derselbe ist. Schneiden wir es in der Mitte auf und strecken wir die linke Bildseite rechts nach vorne. Wie in Abbildung 2 dargestellt
Bild 1
Also schneiden wir es zunächst in sechs Teile, wie im Bild gezeigt, und fügen diese sechs Bilder dann zusammen. Warum ist das so? Schauen Sie sich das Prinzip von CSS-Sprites an! Ich werde hier nicht auf Details eingehen. Sie können meinen anderen Artikel „Making a Poker Card Series 1 – CSS Sprites Image Background Optimization Technology“ lesen.
Abbildung 2
Im obigen Bild bilden das erste und zweite Bild den normalen Menüstil (Standardstil), das dritte und vierte Bild den Bildlaufstil und das fünfte und sechste Bild den angeklickten Menüelementstil.
Wir haben das Schattenbild gezielt extrahiert und in ein kleines Hintergrundbild umgewandelt.
Abbildung 3
erforderlichen Grafiken
sind alle fertig. Als Nächstes fügen wir dieses Bild zum Menüpunkt hinzu.Für die Anzeige einer Schaltfläche sind zwei Bilder erforderlich. Jeder auf der Welt weiß, dass ein HTML-Tag nur ein Bild enthalten kann (wenn Sie feststellen, dass ein Tag zwei Bilder enthalten kann, sagen Sie es mir bitte rechtzeitig und ich werde Sie zum Abendessen einladen!). Oh! Jeder Eintrag in meiner Menüstruktur hat genau zwei Tags, eines ist li und es gibt ein A-Tag darin, das zum Halten der linken und rechten Bilder verwendet werden kann. Li wird verwendet, um das Bild auf der linken Seite zu halten, und A wird verwendet, um das Bild auf der rechten Seite zu halten. Ich bewundere mich wirklich, ich kann mir so gute Ideen einfallen lassen und bin in einer selbstgefälligen Selbstgefälligkeit ...
Seien Sie nicht beschäftigt, oh mein Gott, wenn ich Bilder auf diese Weise installiere, wie kann ich das erreichen? drei Maus-Scroll-Zustände? Wir alle sollten wissen, dass außer dem verdammten IE6 derzeit auch andere Browser die Pseudoklasse li:hover unterstützen. Um jedoch mit allen gängigen Browsern kompatibel zu sein (das ist unser 8. Ziel, vergessen Sie es nicht!), funktioniert diese Methode nicht. IE6 kann die Hover-Pseudoklasse nur auf das A-Tag anwenden und ignoriert andere Tags!
Da IE6 die Hover-Pseudoklasse nur auf das A-Tag anwenden kann, müssen wir, wenn wir ein adaptives Schiebetürmenü erstellen möchten, einige strukturelle Änderungen vornehmen. Es scheint, dass wir dem A-Tag nur ein weiteres Tag hinzufügen können Die Struktur des Menüs wird so aussehen. (Hinweis: Hier beginnt sich die Struktur zu ändern. Obwohl ich dies immer vermeiden wollte, scheint es, dass dieses Tag hinzugefügt werden muss, um die Anforderungen zu erfüllen.)
Wir haben dem A-Tag einen Span-Container hinzugefügt, der den Textinhalt enthält. Jetzt gibt es zwei Etiketten, die zwei Bilder aufnehmen können. Wir platzieren das rechte Bild im Hintergrund des A-Tags und richten es nach rechts aus, und platzieren das linke Bild im SPAN-Tag und richten es nach links aus. Dadurch wird eine vollständige Knopfform angezeigt.
Obwohl ein zusätzliches Tag hinzugefügt wurde, ist es glücklicherweise nicht völlig semantiklos.
Okay, unsere Vorbereitungen sind fast abgeschlossen, es ist Zeit, der Speisekarte ein neues Gewand zu verpassen.
Wenn wir ein Menü mit adaptiver Breite erstellen möchten, können wir den Breitenwert des Menüs nicht festlegen, also können wir die Breite nicht festlegen und es dann nach links verschieben, wie wir es normalerweise tun, wenn wir ein horizontales Menü mit fester Breite erstellen. Wenn dies der Fall ist und die Breite jedes Menüelements unterschiedlich ist, müssen Sie die Breite jedes Elements separat definieren und dann für jedes Menüelement eine ID oder Klasse definieren. Diese Methode ist für die dynamische Schleife nicht förderlich Ausgabe des Hintergrundprogramms.
Was wir brauchen, ist, jedes Menüelement automatisch in einer Zeile von links nach rechts anzuordnen, wie ein Inline-Element. Dann verwenden wir display:inline. Dies ist ein sehr nützliches Attribut: Seine analysierte Anordnung kann unsere Grundanforderungen erfüllen: Etikettenelemente werden automatisch von links nach rechts in einer Reihe angeordnet, und die Breite jedes Elements kann unterschiedlich sein.
Wenn die Verwendung der oben genannten Attribute unsere Anforderungen wirklich erfüllen kann, wird es keinen Textinhalt wie den folgenden geben.
Obwohl dieses Attribut die Grundanforderungen unseres Projekts erfüllen kann, weist es eine sehr schwerwiegende Schwäche auf: Es kann die Werte für Breite und Höhe nicht festlegen. Wenn Sie es nicht glauben, können Sie es versuchen. Es erscheint nur als Standardhöhe und -breite des Textes. Es wird automatisch ausgeblendet, wenn dieser Breiten- und Höhenwert überschritten wird. Auf diese Weise habe ich hier ein Hintergrundbild. Um die Wirkung dieses Bildes zu zeigen, müssen wir eine Breite und Höhe angeben. Das bedeutet, dass wir unsere Wirkung nicht erzielen können, was frustrierend ist! Glücklicherweise gibt es noch ein weiteres Attribut: display:inline-block; dessen Leistung ist das, was wir brauchen.
Aber... dieses Attribut hat auch eine fatale Schwäche, es kann nur von fortgeschrittenen Browsern wie FF3 erkannt werden. Andere Browser können nur einen Umweg nehmen. Oh-oh! Wie wichtig ist es daher, die Browserstandards zu vereinheitlichen! Es scheint, dass HACK auch eine Art der Erleichterung ist, zu der wir keine andere Wahl haben.
Glücklicherweise haben einige Experten bereits eine Lösung gefunden. Bitte lesen Sie zuerst diese beiden Artikel.
Verwandte Tutorials:
„ Zwei Beispiele für die Anwendung von display:inline-block “ (Qin Ge)
Wir alle verstehen das Prinzip der
„ Inline-Block-Attribute zur Simulation der Kompatibilität “ (Yi Fei).
Wir können ein adaptives Menü basierend auf den in den beiden obigen Artikeln bereitgestellten Techniken erstellen.Schreiben wir zunächst den Stil des Bildes auf der rechten Seite, der auf das A-Tag des untergeordneten Knotens des li-Elements angewendet wird.
Wir setzen zuerst display:inline-block und erweitern dann den Seitenabstand auf Geben Sie etwas Platz, um das Bild auszufüllen. Beachten Sie, dass der Bildpfad hier durch Ihren eigenen Pfad ersetzt wird. Legen Sie dann andere Stile fest, z. B. das Entfernen von Unterstreichungen, die Schriftfarbe, die Schriftgröße usw. Stellen Sie das Bild so ein, dass es rechtsbündig ausgerichtet ist.
Das Bild auf der linken Seite der Schaltfläche wird im SPAN-Element platziert und der Abstand eingestellt Stützen Sie es in Breite und Höhe.
und setzen Sie sie dann wieder in den Inline-Inline-Modus zurück, wodurch die Haslayout-Funktion des IE ausgelöst wird.
Im obigen Code sehen wir auch eine HACK-Anwendung, *padding-bottom: 0; und *padding-top: 0;, die verwendet werden, um die unterschiedlichen Effekte von Browsern wie IE und FF zu lösen. Wenn Sie mir nicht glauben, können Sie es löschen und sehen, welche Auswirkungen es hat. Es gibt ein Problem mit der Höhenerweiterung unter IE.
Okay, jetzt ist es an der Zeit, den Effekt zu schreiben, wenn die Maus darüber bewegt wird.
Als nächstes folgt der Effekt nach dem Mausklick.
ok, es scheint, dass Sie es in verschiedenen Browsern überprüft haben Es scheint, dass zufriedenstellende Ergebnisse erzielt werden können. Unten ist ein Screenshot:
Abbildung 4
Die reine CSS-Version des Schiebetürmenüs ist grundsätzlich fertig.