Bagaimana untuk Mencipta Menu Radial Hanya Menggunakan CSS?

Bagaimana untuk mencipta menu jejari menggunakan CSS?

Soalan:

Cara membuat menu yang kelihatan seperti ini:

[Imej]

Saya tidak mahu untuk menggunakan imej JPA. Saya lebih suka menggunakan ikon daripada pakej seperti FontAwesome dan menjana latar belakang/CSS dalam CSS.

Versi menu yang boleh dibuat menggunakan JPA boleh didapati di sini.

Jawapan:

Setelah hampir 3 tahun menunggu, akhirnya saya mempunyai masa untuk menyemak semula soalan ini dan menyiarkan versi yang dipertingkatkan. Anda masih boleh melihat jawapan asal di hujung untuk rujukan.

Walaupun SVG mungkin pilihan yang lebih baik (terutamanya hari ini), matlamat saya adalah untuk menggunakan HTML dan CSS sahaja, tiada JS, tiada SVG, tiada imej (kecuali latar belakang pada elemen akar).

Demo 2015

Tangkapan skrin:

• Chrome 43:

[Imej]

• Firefox 38:

[Imej]

• IE 11:

[Imej]

Kod

HTML agak mudah. Saya menggunakan helah kotak semak untuk menunjukkan/menyembunyikan menu.

<input type='checkbox'>

Saya menggunakan Sass untuk memastikan perkara yang logik dan memudahkan untuk menukar perkara jika perlu. Banyak nota.

/* CSS goes here. */

Pada masa ini jawapan ini merangkumi HTML, Sass dan JavaScript mentah. Ini adalah tindak balas yang besar kerana ia menyelami penyelesaian dan menyediakan contoh kod yang berguna.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Radial Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!