Advertisement
  1. Web Design
  2. Site Elements

Wie man ein CSS3-Rundmenü erstellen kann

by
Read Time:21 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Es gibt keinen besseren Weg, um CSS3 zu lernen, als sich die Hände schmutzig zu machen, und genau das werden wir tun. Ich werde Ihnen beibringen, wie Sie mit ein paar CSS3-Techniken für Anfänger und Fortgeschrittene ein fantastisches CSS3-Rundmenü mit mehreren Ebenen erstellen. Brechen Sie also Ihren bevorzugten Texteditor oder Ihre Lieblings-IDE aus und lassen Sie uns mit CSS3-Magie beginnen!

Heute lernen Sie, wie Sie die Zuckerstangen-Träne aus den vielen verschiedenen Stilen und Farbvarianten herstellen. Sie erhalten alle Variationen in den Quelldateien. Als zusätzlichen Bonus habe ich ein bisschen optionales Javascript hinzugefügt, damit Sie Ihre Bilder je nach schwebendem Menüpunkt drehen können. Die Quelldatei wird sogar mit einer eigenen Dokumentation geliefert!

Hinweis: Die Unterstützung für IE ist derzeit begrenzt. Wir werden dies hauptsächlich durchgehen, um den Rahmen mit dem zu erweitern, was wir in CSS3 tun können... aber wie bei allen Dingen, die am Rande der Praktikabilität stehen, bedeutet dies, ein wenig Stabilität zu opfern. Wir werden uns jedoch am Ende des Tutorials mit dem IE-Thema befassen!


Das Video-Tutorial

Wir bieten dieses Tutorial heute in zwei verschiedenen Formaten an: Ein Video sowie ein vollständig geschriebenes Tutorial unten. Befolgen Sie die von Ihnen bevorzugte Lernmethode (oder beides!) Und wir bringen Sie in kürzester Zeit zum Ende!


Das schriftliche Tutorial

Das Schritt-für-Schritt-Tutorial ist unten. Stellen Sie sicher, dass Sie auch die vollständige herunterladbare Quelle herunterladen!


Schritt 1: Die Ebenen

Das erste, was wir tun möchten, ist, einige Ebenen zu erstellen, die sich überlappen und an Ort und Stelle bleiben, während so wenig Code wie möglich verwendet wird. Es ist wichtig, dass Sie Ihren Code nicht mit viel Aufblähen füllen und nicht viel erstellen
unnötige Floats oder absolut positionierte Elemente, daher werden wir versuchen, so weit wie möglich relativ zu bleiben.

Der Code:

Wie Sie sehen können, ist der Code ziemlich einfach. Wir haben im Wesentlichen eine Schicht übereinander gestapelt und auf diese Weise können sie ihre Positionen halten.

Weiter möchten wir ein Bild in die Mitte des Rades einfügen oder in diesem Fall eine Träne. Dazu fügen wir einfach den folgenden Code zwischen der wrap4-Klasse und der Completer-Klasse ein. Dadurch wird das Bild in der Mitte der Leinwand gesperrt. Wir werden nur ein Rockable-Bild für dieses verwenden, weil sie fantastisch sind!

Jetzt wollen wir jeder Ebene nacheinander etwas Styling hinzufügen.

#menu-wrap:

Das ist der Hauptcontainer für Ihr Rundmenü. Es hat auch alle universellen Schriftarten und Schriftgrößen, die sich auf alles auswirken, was sich innerhalb der div id="menu-wrap" befindet.

Wir werden fortfahren und sicherstellen, dass unser mittleres Bild korrekt gestaltet ist, indem wir es mit Rändern in der Mitte des Rads platzieren und ihm einige Dimensionen und einen Rand hinzufügen.

Alle Wrapper: Wir möchten einige Stile erstellen, die für alle Haupt-Wrapper gelten, indem wir einen universellen Rahmenradius hinzufügen, sie alle in die Mitte legen, eine relative Position hinzufügen, damit alles enthalten bleibt, und sie nach unten drücken, um eine gleichmäßige Ebene zu erhalten bewirken.

.wrap1:

Das ist Ihre größte Schicht, die hinter allen anderen sitzt. Wir werden einen roten Hintergrund mit Farbverlauf erstellen und für ältere Brower einen soliden roten Fallback verwenden. Wir werden auch CSSpie verwenden, um dem IE mitzuteilen, dass es in Ordnung ist, diese Stile zu verwenden. Danach müssen wir nur noch eine Breite und Höhe hinzufügen und fertig. Sie möchten sicherstellen, dass Breite und Höhe größer sind als alle anderen Ebenen, damit sie dahinter angezeigt werden.

.wrap2:

Jetzt für Wrap 2 werden wir genau das Gleiche tun, nur werden wir Variationen von Weiß als Farbverlauf verwenden und einen äußeren und inneren Kastenschatten hinzufügen, um einen leichten Abschrägungseffekt plus den Hintergrundschatten zu erzeugen. Dann müssen wir die Breite und Höhe etwa 40 Pixel kleiner als die Hauptebene machen, um sie schön und gleichmäßig zu machen.

.wrap3 & 4:

Wir werden nun den Vorgang für alle anderen Wrapper mit verschiedenfarbigen Verläufen wiederholen und jede Schicht 40px kleiner als die letzte machen.

.wrap5 & .nav-holder:

Jetzt können wir wrap5 und den nav-holder stylen, der alle Menüpunkte an Ort und Stelle hält, und für den Candycane-Stil werden wir ihn schwarz machen, um einen schönen neutralen Kontrast zu schaffen, während wrap5 weiß ist und als Behälter für das dient mittleres Bild. Was wir hier tun, ist das Ausschneiden des Hintergrunds, sodass Sie durch wrap5 und den nav-holder sehen können, sodass die anderen Ebenen sowie das mittlere Bild dahinter erscheinen. Nachdem wir es transparent gemacht haben, fügen wir dem nav-holder einen schwarzen Rand und Wrap5 einen weißen Rand hinzu. Der Rand des nav-holder sollte auf der rechten Seite (für die Untermenüs) ausgeblendet, auf der linken Seite (für die Hauptmenüs) verdoppelt und für den Rest fest sein, um einen schönen und einfachen Effekt zu erzielen und gleichzeitig die Anzahl der Ebenen zu minimieren hinzufügen. Traditionell können Sie mit diesem Effekt bis zu 5 oder 6 neue Ebenen hinzufügen. Dies spart viel Code.

Dieses Mal ist die Breite und Höhe des Wrap5 60 Pixel kleiner als die der anderen Ebenen, um es schön und gleichmäßig zu machen. Ein weiterer Druck von 10 Pixel oben hilft beim Ausrichten der Ebene, und ein innerer Kastenschatten gibt uns eine schöne Perspektive für den Abstand zwischen Wrap5 und dem mittleren Bild.

Wenn Sie dem nav-holder eine Spitze von 0 hinzufügen, werden die Ebenen automatisch an den anderen ausgerichtet. Wir werden auch einen negativen Rand für die weitere Ausrichtung oben links verwenden und eine proportionale Höhe/Breite erstellen, damit er gut auf die anderen Ebenen passt.

"Der Rand des nav-holder sollte auf der rechten Seite (für die Untermenüs) ausgeblendet, auf der linken Seite (für die Hauptmenüs) verdoppelt und für den Rest fest sein, um einen schönen und einfachenEffekt zu erzielen und gleichzeitig die Anzahl der Ebenen zu minimieren, die wir verwenden muss hinzufügen."

Nun, das war einfach genug. Nachdem Sie das alles beendet haben, haben Sie hoffentlich etwas Neues gelernt, das Sie bereits zu Ihren Fähigkeiten hinzufügen können. So sollte Ihre Kreation jedoch bisher aussehen. Wenn es nicht so aussieht, gehen Sie bitte den Code noch einmal durch und sehen Sie, ob Sie etwas verpasst haben... keine Sorge, es ist wahrscheinlich etwas sehr Geringes.

Die Completers: Hmm... sieht das für Sie unvollständig aus? Wir müssen es mit ein paar Ebenen abrunden, die ich als Komplettierer bezeichnet habe, damit wir Teile des mittleren Bildes ausblenden und den Navigationshalter weiter um die anderen Ebenen legen können, um einen schönen abgerundeten Effekt zu erzielen und ihn zu schließen.

Das zu tun, was ich gerade erwähnt habe, ist ziemlich einfach. Wir können den größten Teil des Stils für weniger Code auf beide Vervollständiger anwenden. Fügen wir einer Seite einen Randradius hinzu, um eine schöne Kurve zu erstellen. Anschließend richten wir den Completer mithilfe von Transformation zwischen wrap1 und wrap5 aus. Das Hinzufügen unserer Hintergrundfarbe ist sehr wichtig, sonst wird nichts angezeigt. Wir müssen diese Ebene absolut positionieren und nach rechts und oben verschieben, damit sie perfekt ausgerichtet ist.

.completer1 zeigt für diesen Teardrop-Stil keine an. Bei anderen Stilen wie dem Rad haben wir diesen Teil gelöscht, damit er angezeigt wird.

.completer2 hat etwas mehr Rotation und wir müssen es ein wenig nach unten drücken, damit es passt.

Nachdem Sie die Vervollständiger hinzugefügt haben, sollten Sie so etwas haben... Wenn Sie nicht das Gleiche wie das haben, was Sie hier sehen, überprüfen Sie einfach Ihren Code und sehen Sie, was Sie verpasst haben.

Jetzt haben wir eine große Anzahl von Ebenen, mit denen wir arbeiten können. Sie sind alle gut enthalten und haben sanfte CSS3-Effekte. Also lasst uns weitermachen und dieses Baby zum Laufen bringen!


Schritt 2: Die Navigationsmenüelemente und Untermenüelemente

Jetzt möchten wir Navigationslinks hinzufügen, die so aussehen, als ob sie sich hinter verschiedenen Ebenen befinden. Auf der linken Seite (am doppelten Rand) möchten wir die Hauptmenüelemente und auf der rechten Seite (im offenen Bereich) möchten wir, dass die Untermenüelemente angezeigt werden, nachdem ein Hauptelement bewegt wurde. Sie werden überrascht sein, wie einfach dies zu einfach ist.

Der Code:

Es gibt einen Schwebeblock, um die Menüs aktiv zu halten, wenn Sie mit der Maus über das Lenkrad fahren. Wir möchten sicherstellen, dass das gesamte Rad abgedeckt wird. Aus Gründen der IE-Kompatibilität fügen wir einen Hintergrund mit einer Deckkraft von 0,01 hinzu, andernfalls gewinnt der IE Ich erkenne nicht, dass das Element sogar da ist.

Die Verwendung des margin-left: 76px stellt sicher, dass Sie genügend Platz haben, um über das Hauptmenü und das Untermenü zu schweben und das Rad zu überqueren, ohne dass etwas verschwindet.

Jetzt wollen wir die Aufzählungspunkte aus jedem Menüpunkt oder [li] entfernen. Wir möchten auch sicherstellen, dass sie relativ zum nav-holder sind.

Sie können einen Rahmenradius hinzufügen, um ein wenig mehr Stil zu erhalten. Wir machen den Hintergrund einfarbig und verschieben die Menüelemente nach links, sodass sie kaum die Ränder des nav-holder berühren.

Das padding, der text-indent und die color dienen dem zusätzlichen Styling und sind nicht erforderlich, damit das Menü funktioniert.

Fügen wir nun den Untermenüs ein wenig Farbverlauf hinzu, schieben Sie ihn nach rechts und stoßen Sie den ersten Untermenüpunkt knapp an den Rand von wrap5.

Durch Hinzufügen eines box-shadow können wir den Effekt erzielen, dass sich die Untermenüelemente unter ihren jeweiligen Ebenen befinden.

Wenn Sie jedem Untermenüelement Ränder hinzufügen, können Sie mehr Trennung erzielen und den Effekt erzielen, dass sich jedes Element unter einer anderen Ebene befindet.

Sie können auch eine Deckkraft für jedes Element hinzufügen, damit es von oben nach Mitte und von unten nach Mitte verblasst, wenn das mittlere Objekt die volle Deckkraft hat.

Ok, Sie haben Ihr Untermenü hinzugefügt, aber es wird weiterhin angezeigt, ohne dass ein Hauptmenü darüber bewegt wird. Um dies zu beheben, müssen wir einfach eine Anzeige keine zur [ul] hinzufügen.

Jetzt wird es überhaupt nicht mehr angezeigt! Ok, lassen Sie uns fortfahren und es anzeigen lassen, nachdem ein Hauptelement über den Mauszeiger bewegt wurde. Wenn Sie li:hover > ul verwenden, können Sie feststellen, dass beim Bewegen eines Hauptmenüs [li] das [ul] für das entsprechende Untermenü mithilfe von display:block angezeigt wird.

Styling für jeden Hauptmenüpunkt.

Für reine Ästhetik können wir einen Randradius, einen Kastenschatten und einen Hintergrund hinzufügen. Notwendig ist die Erstellung von Höhe, Breite, absoluter Positionierung und oberem Rand.

Der obere Rand ermöglicht es uns, den ersten Menüpunkt nach unten zu verschieben, wo wir ihn haben möchten, und dann können wir weniger Rand verwenden, um den Rest der Elemente nach unten zu drücken.

Für die verbleibenden 3 Menüelemente fügen wir jeweils einen oberen Rand hinzu, um einen gleichmäßigen Abstand zwischen ihnen zu erzielen, und einen verbleibenden Rand, um sie gegen die verschiedenen Ebenen zu stoßen.

Als nächstes müssen wir sicherstellen, dass jedem Element die Drehung hinzugefügt wird, damit wir das Menü gut um das Rad herum anpassen können.

Nachdem wir uns um die Hauptmenüpunkte gekümmert haben, werden wir dasselbe für das Untermenü tun, außer dass wir die Menüpunkte nicht um das Rad drehen, sondern direkt auf und ab bewegen sollen. Dazu müssen wir die Drehung des Hauptmenüs kompensieren, indem wir jedem Untermenü eine Drehung hinzufügen.

Wie im Hauptmenü müssen wir einen oberen Rand hinzufügen, um den Abstand zwischen den einzelnen auszugleichen, und die einzelnen Untermenüelemente nach rechts verschieben, damit sie noch näher an den jeweiligen Ebenen liegen.

Schließlich können wir ein optionales Styling hinzufügen, um die Schriftarten auszublenden und beim Bewegen des Mauszeigers wieder fest zu machen. Dadurch wird jedes Element für den Benutzer nach vorne gebracht, wenn er mit der Maus darüber fährt.

Diese Stile sind nicht erforderlich, damit das Menü funktioniert, aber sie fügen einige nette Effekte hinzu und erhöhen die Benutzerfreundlichkeit.

Wenn Sie jedes einzelne Untermenü weiter formatieren möchten, können Sie den folgenden Code verwenden...

Nachdem Sie den letzten Teil abgeschlossen haben, sollten Sie so etwas haben... Noch einmal, wenn Ihr Teil nicht wie das Bild unten aussieht, machen Sie sich keine Sorgen, gehen Sie einfach zurück und überprüfen Sie Ihren Code.

Credits: Das mittlere Bild stammt aus der Envato-Assets-Bibliothek.


Was ist mit IE?

Nun, für IE können wir CSSPIE in einem separaten Stylesheet verwenden. Ich werde nicht viel darauf eingehen, da der IE selbst mit diesem Fix nicht richtig angezeigt wird. Wenn Sie eine bessere Lösung kennen, lassen Sie es mich bitte in den Kommentaren wissen.

Mithilfe des Verhaltens können wir die csspie-PHP-Datei aufrufen, um dem IE mitzuteilen, dass die Verwendung der CSS3-Stile in Ordnung ist. Also hier ist, wie es funktionieren wird...

Ein paar andere IE-Korrekturen gehen so...


Du bist fertig!

Ich hoffe euch hat dieses Tutorial gefallen! Denken Sie daran, dass die CSS3-Unterstützung begrenzt ist. Wenn Sie Kompatibilität mit allen jemals erstellten Browsern wünschen, gibt es andere Möglichkeiten, die gleiche Aufgabe wie die Verwendung von Bildern und etwas Javascript auszuführen. Wenn Sie ein Tutorial zu den anderen Menüstilen, zur Verwendung der Javascript-Version oder einfach zur Verwendung fantastischerer CSS3-Effekte wünschen, lassen Sie es mich in den Kommentaren wissen und ich werde einige für Sie zusammenstellen! Hinterlassen Sie Ihre Kommentare und Fragen unten ;)

Sei geduldig und lerne weiter und bevor du es weißt, wirst du ein Meister in allem sein, was du tust!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.