Comment créer un menu radial en CSS sans images ni bibliothèques ?

Comment créer un menu radial en CSS

Introduction

Les menus radiaux, avec leurs La disposition circulaire unique des options offre un moyen intuitif et visuellement attrayant d'accéder aux commandes ou de naviguer dans le contenu. Dans cet article, nous aborderons les techniques de création d'un menu radial à l'aide de CSS, sans recourir à des images ou à des bibliothèques tierces.

Structure HTML

Nous Je vais commencer par une structure HTML simple composée d'une case à cocher de saisie (pour basculer la visibilité du menu), d'une étiquette (pour le bouton central) et d'une liste non ordonnée (pour le menu radial éléments).

<input type='checkbox'>

Implémentation CSS

Maintenant, nous allons styliser notre menu radial en utilisant CSS. Le code suivant présente une version révisée, tenant compte des commentaires et intégrant des améliorations stylistiques.

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

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

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

label, a {
    color: #858596;
    font: 700 1em/ 2em sans-serif;
    text-align: center;
    text-shadow: 0 1px 1px #6c6f7e;
    cursor: pointer;
}

label {
    z-index: 2;
    margin: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px white,  0 .125em .25em #876366,  0 .125em .5em #876366;
    background: #d3d3d3;
    background: -webkit-radial-gradient(#d4c7c5, #e5e1dd);
    background: radial-gradient(#d4c7c5, #e5e1dd);
}

ul {
    z-index: 1;
    margin: -10em 0;
    padding: 0;
    list-style: none;
    transform-origin: 50% -13em;
    transform: scale(0.001); 
    will-change: transform;
    opacity: .001;
    filter: drop-shadow(0 0.125em 0.25em #847c77);
    transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
ul:before, ul:after {
    position: absolute;
    margin: -3em -0.25em;
    width: 0.5em;
    height: 3em;
    transform-origin: 50% 100%;
    background: #d3d3d3;
    background: -webkit-linear-gradient(#ddd, #c9c4bf);
    background: linear-gradient(#ddd, #c9c4bf);
    content: '';
}
ul:before {
    border-radius: 0.5em 0 0 0.5em;
    transform: rotate(-22.5deg) translate(-0.25em, -13em);
    box-shadow: inset 1px 0 1px #eee;
}
ul:after {
    border-radius: 0 0.5em 0.5em 0;
    transform: rotate(22.5deg) translate(0.25em, -13em);
    box-shadow: inset -1px 0 1px #eee;
}

li {
    overflow: hidden;
    width: 16em;
    height: 16em;
    transform-origin: 0 100%;
}
li:nth-child(1) {
    transform: rotate(-22.625deg) skewY(-75deg) scaleX(0.25882);
}
li:nth-child(2) {
    transform: rotate(-7.5deg) skewY(-75deg) scaleX(0.25882);
}
li:nth-child(2) a:after {
    position: absolute;
    top: 3em;
    left: 50%;
    margin: -0.375em;
    width: 0.75em;
    height: 0.75em;
    transform: rotate(45deg);
    box-shadow: inset -1px -1px 1px #eee;
    background: -webkit-linear-gradient(135deg, #bbb, #c9c4bf 50%);
    background: linear-gradient(-45deg, #bbb, #c9c4bf 50%);
    content: '';
}
li:nth-child(3) {
    transform: rotate(7.625deg) skewY(-75deg) scaleX(0.25882);
}
li a, li:before {
    margin: 0 -16em;
    width: 32em;
    height: 32em;
    border-radius: 50%;
}
li:before, li:after {
    position: absolute;
    border-radius: 50%;
    transform: scaleX(3.8637) skewY(75deg);
    content: '';
}
li:before {
    box-shadow: inset 0 0 1px 1px #fff, inset 0 0 3em #ebe7e2, inset 0 0 1px 2.9375em #c9c4bf, inset 0 0 0 3em #dcdcdc;
}
li:after {
    top: 100%;
    left: 0;
    margin: -13em;
    width: 26em;
    height: 26em;
    border-radius: 50%;
}

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

Explication

• Case à cocher : Lorsque cette case est cochée , la case à cocher bascule la visibilité du radial menu.
• Étiquette : L'étiquette est positionnée comme le bouton central et contient l'icône d'étoile de déclenchement.
• Structure du menu radial : La liste non ordonnée contient les éléments de menu sous forme d'éléments de liste («li») avec leurs ancres respectives ("a").
• Transformations : Nous utilisons des transformations CSS pour créer la disposition radiale en faisant pivoter et en inclinant les éléments.
• Ombres et dégradés : Les ombres et les dégradés radiaux donnent aux boutons et aux éléments de menu un effet 3D.
• Pseudo Éléments : Les pseudo-éléments créent l'illusion de profondeur et de bords arrondis.

Cette démonstration améliorée présente toutes les fonctionnalités du menu radial, avec des coins arrondis, des effets d'ombrage et des astuces facultatives pour indiquer le article actif.

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!