Comment créer un menu radial en utilisant uniquement CSS ?

Comment créer un menu radial en utilisant CSS ?

Question :

Comment créer un menu qui ressemble à ceci :

[Image]

Je ne veux pas pour utiliser des images PSD. Je préfère utiliser des icônes de packages comme FontAwesome et générer l'arrière-plan/CSS en CSS.

Une version du menu pouvant être créée à l'aide de PSD peut être trouvée ici.

Réponse :

Après presque 3 ans d'attente, j'ai enfin le temps de revenir sur cette question et de poster une version améliorée. Vous pouvez toujours consulter la réponse originale à la fin pour référence.

Bien que SVG puisse être un meilleur choix (surtout aujourd'hui), mon objectif est d'utiliser uniquement HTML et CSS, pas de JS, pas de SVG, pas d'images (sauf pour l'arrière-plan de l'élément racine).

Démo 2015

Captures d'écran :

• Chrome 43 :

[Image]

• Firefox 38 :

[Photo]

• IE 11 :

[Photo]

Code

HTML est assez simple. J'utilise l'astuce des cases à cocher pour afficher/masquer le menu.

<input type='checkbox'>

J'utilise Sass pour garder les choses logiques et faciliter les changements si nécessaire. Beaucoup de notes.

/* CSS goes here. */

Actuellement, cette réponse couvre HTML, Sass et JavaScript brut. Il s'agit d'une réponse importante car elle plonge dans la solution et fournit des exemples de code utiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!