Handgefertigtes Navigationsmenü für geteilte Schiebetüren

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.

Die idealen Ziele, die dieses Navigationsmenü erreichen möchte, sind:

1. Schön, mit Persönlichkeit.

2. Die Struktur ist klar, die Semantik ist klar und es gibt keine redundanten Tags.

3. Leistung, Struktur und Verhalten werden auf drei Ebenen getrennt, ohne dass es zu Eingriffen kommt.

4. Förderlich für die Datenausgabe von Hintergrundprogrammen.

5. Das Menü verfügt über dreistufige Effektänderungen.

6. Kann die angeklickten Menüpunkte hervorheben und aufzeichnen.

7. Anpassbare Textbreite. Wenn sich die Länge des Textinhalts ändert, kann sich die Schaltfläche im Laufe der Zeit ändern.

8. Kompatibel mit allen gängigen Browsern.

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, sind sie entweder strukturell ü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 Beschriftungen enthält. Jede Beschriftung hat ihre eigene Semantik. 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

Okay, es ist jetzt nur noch ein Skelett, lass es uns ein wenig verschönern, ein paar einfache Stile hinzufügen, zumindest 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 ist es großartig, den Designteil zu speichern. 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 erstellen eine adaptive Schaltfläche, 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. 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.

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 speziell das Schattenbild extrahiert und ein kleines Hintergrundbild erstellt.

Die benötigten Grafiken sind 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 so gute Ideen haben und bin so selbstgefällig mit mir selbst ...

Seien Sie nicht beschäftigt, oh mein Gott, wenn ich Bilder wie dieses installiere, wie kann ich dann meine drei Maus-Scroll-Zustände erreichen? 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 Etikett 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, mit der wir uns auseinandersetzen müssen.

Glücklicherweise haben einige Experten bereits eine Lösung gefunden. Bitte lesen Sie zuerst diese beiden Artikel.

Verwandte Tutorials:
„Zwei Anwendungsbeispiele von display:inline-block“ (Qin Ge)
„Inline-Block-Attribut für Simulationskompatibilität“ (Yi Fei)

Wir alle verstehen das Prinzip und können ein adaptives Menü erstellen, das auf den Techniken basiert, die in den beiden obigen Artikeln beschrieben werden.

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.

li a{display:inline-block; padding-top:10px; *padding-bottom:0; /button.gif) no-repeat right -36px; text-decoration:none; Farbe:#fff;}

Wir legen zuerst display:inline-block fest und verwenden dann padding, um die Ränder zu erweitern, sodass ein gewisser Platz zum Ausfüllen des Bildes vorhanden ist. 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, sein Bild links ausgerichtet und der Abstand eingestellt, um seine Breite und Höhe zu erweitern.

Versetzen Sie sie dann wieder in den Inline-Modus, 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.

li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}

Als nächstes folgt der Effekt nach dem Mausklick.

li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}

Ok, es scheint, dass Sie fertig sind. Wenn Sie es in verschiedenen Browsern betrachten, können Sie anscheinend zufriedenstellende Ergebnisse erzielen.

Nun ist die reine CSS-Version des Schiebetürmenüs im Grunde fertig.