Seien Sie kein Quadrat, brechen Sie außerhalb Ihrer langweiligen Kiste auf und probieren Sie einen Kreis für Größe. Heute erstellen wir ein kreisförmiges Navigationsmenü, das sich an verschiedenen Punkten dreht, wenn der Benutzer über einem Anker schwebt.
Auf dem Weg müssen wir einige Hindernisse überwinden, wie zum Beispiel, wie man HTML strukturiert, um einen entfernten Schwebeflug zu begünstigen und alle Elemente so zu positionieren, dass alles funktioniert. Es ist eine lustige Herausforderung und es gibt viel zu lernen, lasst uns anfangen!
Demo starten - Dateien herunterladen
Schritt 1: Strukturelles HTML
Bevor wir ein einzelnes Zeichen von HTML schreiben, müssen wir die Struktur dessen, was wir bauen, herausfinden. Zu diesem Zweck können wir uns an Photoshop wenden und eine grundlegende Skizze erstellen, wie das Menü aussehen soll. Folgendes habe ich mir ausgedacht:
Grundsätzlich ist jedes der Rechtecke oben an einen der vier kleinen Kreise innerhalb des großen Kreises gebunden. Wenn ein Rechteck darüber bewegt wird, dreht sich der entsprechende kleine Kreis bis zum oberen Rand des Menüs. Wieder nutzen wir das Konzept einer "Fernbedienung". hover, weil der Benutzer mit einem Bereich interagiert und sich auf einen anderen auswirkt.
Jedes Mal, wenn ich versuche, einen Remote-Hover zu starten, brauche ich ein paar Versuche, um die Struktur richtig zu machen. Dies liegt an der Funktionsweise von CSS-Selektoren und insbesondere an der Funktionsweise der Hover-Pseudoklasse. Folgendes berücksichtigen:
Nehmen wir an, wir setzen diese Struktur mit der Idee ein, dass wir einen Schwebeflug über dem Anker haben wollten, um die Farbe des Absatzes zu ändern. Wenn Sie eine grundlegende Vorstellung davon haben, wie entfernte Hover-Funktionen funktionieren, werden Sie möglicherweise ein paar CSS wie folgt finden:
Wie sich herausstellt, funktioniert das einfach nicht. In unserem CSS-Selektor müssen wir den Ankerpunkt mit dem zu handelnden Absatz verknüpfen, aber unsere Elemente bestehen aus zwei völlig getrennten Divs. Es gibt keinen einfachen Weg, so weit und über den DOM-Baum zu klettern.
Also, was machen wir? Die Antwort liegt in der Umstrukturierung unseres HTML-Codes. Diesmal werfen wir die beiden Elemente auf die gleiche Ebene des Baums.
Jetzt ist unser Absatz ein Geschwister unseres Ankers, was bedeutet, dass wir eine klare Möglichkeit haben, sie in unserem CSS zusammenzubinden. So funktioniert das:
Dieses Mal weisen wir den Browser an, eine Farbverschiebung für jeden Absatz auszulösen, der das unmittelbare Geschwister eines Ankers ist, über dem der Mauszeiger bewegt wird.
Anwendung
Wenn wir dieses Wissen auf unser Szenario anwenden, können wir eine funktionierende Struktur entwickeln. Erstellen Sie zunächst drei Divs: Wrapper, Menü und Kreis. Nest Speisekarte Innen Verpackung und Kreis Innen Speisekarte.
Platzieren Sie im Menü div vier Anker mit jeweils einer einzigartigen Klasse. Platzieren Sie im Kreis div eine ungeordnete Liste mit den Zahlen 1 bis 4.
Es mag immer noch ein wenig verwirrend sein, wie all diese Teile mit unserer vorherigen Skizze zusammenhängen. Aktualisieren wir sie also mit ein paar visuellen Hinweisen, um Ihnen eine Vorstellung davon zu geben, was alles tut.
Schritt 2: Wrapper-CSS
Der obige Code repräsentiert den gesamten HTML-Code, den wir für dieses kleine Projekt benötigen. Der Rest unserer Arbeit ist alles CSS. Lassen Sie uns zunächst einen grundlegenden Code für die Rücksendung und Positionierung festlegen:
Hier gibt es nicht viel Verwirrung, wir skizzieren einfach unseren Wrapper. Notiere dass der -webkit-backface-Sichtbarkeit Bit soll einen Fehler verhindern, der dazu führt, dass Webkit bei CSS-Übergängen flimmert.
Schritt 3: CSS umkreisen
Als nächstes werden wir zum Codieren dieses großen Kreises springen. Das Erstellen eines Kreises in CSS ist ziemlich einfach. Stellen Sie nur sicher, dass Höhe und Breite gleich sind und dass der Randradius auf mindestens 50% festgelegt ist. Alles andere hier hilft einfach, alles schön zu positionieren.
Damit der Kreis ein bisschen schicker aussieht, fügen wir einen Schatten hinzu. Zum Schluss werfen wir einen Übergang, so dass der Kreis die später stattfindende Drehung animiert.
Wenn wir einen Blick auf unsere Live-Vorschau werfen, sollten wir einen schönen großen Kreis und einige andere verstreute Elemente haben, die wir als nächstes behandeln werden.
Schritt 4: Menü CSS
Für unseren nächsten Trick gestalten wir die Menüpunkte. Um dies zu erreichen, zielen Sie auf die Anker, fügen Sie Rand und Polsterung hinzu, legen Sie die Breite und die Farbe fest, entfernen Sie die Textdekoration und gestalten Sie die Schrift. Richten Sie dann den Hover-Status ein und fügen Sie eine Hintergrundfarbe hinzu. Hier ist der Code:
Wenn wir nun unsere Live-Vorschau betrachten, werden die Links in unserem Menü viel schöner aussehen. Die Listenelemente sind immer noch aus dem Gleichgewicht geraten, also greifen wir diese als nächstes an.
Schritt 5: Little Circle CSS
Um die kleinen Kreise zu erstellen, zielen wir zuerst auf die Listenelemente und richten sie sehr ähnlich wie der große Kreis ein: Stellen Sie Höhe und Breite gleich und setzen Sie den Randradius auf 50%. Löschen Sie außerdem die Aufzählungspunkte, setzen Sie den Hintergrund auf Weiß und gestalten Sie die Schriftart wie folgt.
Hier ist der knifflige Teil. Oben haben wir jedem der Kreise eine absolute Positionierung gegeben, so dass wir sie jetzt einrasten müssen. Wir können jeden einzelnen Kreis mit anvisieren n-te Kind, dann benutze oben und links um sie zu schubsen, wo wir sie wollen. Schließlich möchten wir es so gestalten, dass die Oberseite jeder Zahl dem äußeren Rand des großen Kreises zugewandt ist, so dass, wenn sich das gesamte Element dreht, die Zahl oben immer auf der rechten Seite liegt. Dazu verwenden wir eine CSS-Transformation.
Wenn wir uns jetzt unsere Vorschau ansehen, ist alles ziemlich gut. Es gibt jedoch eine Sache, die nicht ganz richtig ist.
Schritt 6: Inner Circle CSS
Unser ursprüngliches Konzept war nicht nur ein großer Kreis, es gab auch einen zentrierten inneren Kreis. Wir können dies ohne zusätzlichen HTML-Code unter Verwendung unseres alten Freundes tun Vor. Erstellen Sie zuvor ein Element VerpackungSetzen Sie den Inhalt auf "DS", machen Sie ihn zu einem Kreis wie die anderen (diesmal 130 Pixel), richten Sie den Text aus, gestalten Sie ihn, verschieben Sie ihn mit z-index nach oben und positionieren Sie ihn mit absoluter Positionierung.
Das sieht viel besser aus! Damit ist unser visuelles Styling komplett abgeschlossen. Jetzt bleibt nur noch, diesen Sauger zum Leben zu erwecken.
Schritt 7: Hover Circle CSS
Um unser Menü zu drehen, müssen wir unseren Remote-Hover-Trick in Kombination mit einer CSS-Transformation verwenden. Wenn der Benutzer den Mauszeiger über eines der obersten Menüelemente bewegt, wird das gesamte Kreiselement gedreht, sodass sich die entsprechende Zahl oben befindet.
Der schwierigste Teil davon ist die Auswahl des Selektors. Wir beginnen auf der höchsten Ebene, die sowohl das Kreisdiv als auch die Menüelemente enthält. Dies ist natürlich das Menü div. Dann schränken wir unsere Optionen auf ein bestimmtes Kind des Menüs ein und richten es im Hover an. Zum Schluss sagen wir dem Browser, dass wir handeln wollen irgendein Geschwister dieses Gegenstands, der mit einer Klasse von "Kreis" überbewegt wird. So sieht das in der Praxis aus:
Es ist ein Biest eines Selektors, aber es erledigt die Arbeit und ist gut genug für unser kleines Experiment. Da wir hier auf den zweiten Kreis zielen, müssen wir das gesamte Div um 90 Grad drehen. Da wir gegen den Uhrzeigersinn gehen wollen, wird die Zahl negativ sein:
Das ist alles, was dazu gehört, jetzt wenden wir diese Technik einfach in allen vier Kreisen an. Wir beginnen mit einer Rotation von 0, dann -90, -180 und schließlich -270.
Schau mal!
Glückwunsch, du bist fertig! Jetzt ist es an der Zeit, die Früchte unserer harten Arbeit zu überprüfen. Hier ist eine Demo.
Demo: Klicken Sie hier, um zu starten.
Wie immer, vielen Dank fürs Lesen und bitte einen Kommentar hinterlassen, damit ich wissen kann, was Sie denken. Es gibt verschiedene Wege, wie Sie an dieses Projekt herangehen könnten. Wie hätten Sie es anders gemacht?