Wie erstelle ich ein Radialmenü nur mit CSS?

Wie erstelle ich ein Radialmenü mit CSS?

Frage:

So erstellen Sie ein Menü, das so aussieht:

[Bild]

Ich möchte nicht um PSD-Bilder zu verwenden. Ich würde lieber Icons aus Paketen wie FontAwesome verwenden und den Hintergrund/CSS in CSS generieren.

Eine Version des Menüs, die mit PSD erstellt werden kann, finden Sie hier.

Antwort:

Nach fast drei Jahren des Wartens habe ich endlich die Zeit, diese Frage noch einmal zu prüfen und eine verbesserte Version zu veröffentlichen. Sie können die Originalantwort am Ende immer noch als Referenz ansehen.

Während SVG möglicherweise die bessere Wahl ist (besonders heute), ist es mein Ziel, nur HTML und CSS zu verwenden, kein JS, kein SVG, keine Bilder (außer dem Hintergrund auf dem Stammelement).

Demo 2015

Screenshots:

• Chrome 43:

[Bild]

• Firefox 38:

[Bild]

• IE 11:

[Bild]

Code

HTML ist ziemlich einfach. Ich verwende den Kontrollkästchen-Trick, um das Menü anzuzeigen/auszublenden.

<input type='checkbox'>

Ich verwende Sass, um die Dinge logisch zu halten und es einfacher zu machen, Dinge bei Bedarf zu ändern. Viele Notizen.

/* CSS goes here. */

Derzeit deckt diese Antwort HTML, Sass und rohes JavaScript ab. Dies ist eine umfangreiche Antwort, da sie sich mit der Lösung befasst und nützliche Codebeispiele bereitstellt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Radialmenü nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!