Comment créer un menu circulaire avec des icônes en utilisant du CSS pur ?

Comment créer un menu radial en CSS

Présentation

Cet article fournira un guide étape par étape sur la création d'un menu circulaire avec icônes utilisant du CSS pur. L'objectif est d'éviter d'utiliser des images ou du JavaScript pour améliorer les performances et l'accessibilité.

Structure HTML

La structure HTML du menu radial est relativement simple. Il se compose d'une case à cocher d'entrée pour basculer la visibilité du menu, d'une étiquette pour la case à cocher et d'une liste non ordonnée contenant les éléments de menu en tant qu'éléments de liste :

<input type='checkbox'>

Styles CSS

Le Les styles CSS sont cruciaux pour le positionnement, le style et l'animation du menu. Les propriétés les plus importantes et leurs valeurs sont :

• Transformation : Utilisé pour faire pivoter, mettre à l'échelle et incliner les éléments afin de créer la disposition radiale.
• Transition : Définit la durée et la fonction de synchronisation pour l'apparition et la disparition fluides du menu.
• Border-radius : Crée les coins arrondis pour les éléments de menu.
• Box-shadow : Ajoute de la profondeur et de la dimension aux éléments du menu.
• Position : Garantit que le menu est centré sur l'écran.

Extrait de code

input {
  transform: translate(-100vw);
  visibility: hidden;
}

input:checked ~ ul {
  transform: scale(1);
  opacity: 0.999;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

label, ul, li {
  position: absolute;
  left: 50%;
  bottom: 50%;
}

label {
  transform: translate(-50%, -50%);
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px white, 0 0.125em 0.25em #876366,  0 0.125em 0.5em #876366;
  background: #d3d3d3;
  background: radial-gradient(#d4c7c5, #e5e1dd);
  cursor: pointer;
}

ul {
  transform: translate(-50%, -50%) scale(0.001);
  transform-origin: 50% 0%;
  will-change: transform;
  opacity: 0.001;
  transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

li {
  overflow: hidden;
  width: 16em;
  height: 16em;
  transform-origin: 0 100%;
}

a {
  display: block;
  transform: rotate(7.5deg)  scaleX(3.8637) skewY(75deg);
  line-height: 3em;
  text-align: center;
  text-decoration: none;
}

Conclusion

Ce menu radial basé sur CSS offre un moyen visuellement attrayant et convivial d'organiser et d'accéder aux options. En élaborant soigneusement le CSS, le menu peut être adapté pour correspondre à la conception globale et aux fonctionnalités du site Web ou de l'application.

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!