Bagaimana untuk Membina Menu Radial dalam CSS Tanpa Imej atau Perpustakaan?

Cara Membuat Menu Radial dalam CSS

Pengenalan

Menu Radial, dengan mereka susunan pilihan bulat yang unik, menawarkan cara yang intuitif dan menarik secara visual untuk mengakses arahan atau menavigasi kandungan. Dalam artikel ini, kami akan menyelidiki teknik mencipta menu jejari menggunakan CSS, tanpa bergantung pada imej atau perpustakaan pihak ketiga.

Struktur HTML

Kami akan bermula dengan struktur HTML ringkas yang terdiri daripada kotak semak input (untuk menogol keterlihatan menu), label (untuk butang tengah) dan senarai tidak tertib (untuk item menu jejari).

<input type='checkbox'>

Pelaksanaan CSS

Sekarang, kami akan menggayakan menu jejari kami menggunakan CSS. Kod berikut menunjukkan versi yang disemak, menangani maklum balas dan menggabungkan penambahbaikan gaya.

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;
}

Penjelasan

• Kotak semak: Apabila ditandakan , kotak pilihan menogol keterlihatan menu jejari.
• Label: Label diletakkan sebagai butang tengah dan mengandungi ikon bintang pencetus.
• Jejari Struktur Menu: Senarai tidak tersusun mengandungi item menu sebagai elemen senarai ('li') dengan sauh masing-masing ('a').
• Transformasi: Kami menggunakan transformasi CSS kepada cipta susun atur jejari dengan memutar dan menyerong elemen.
• Bayang-bayang dan Kecerunan: Bayang-bayang dan kecerunan jejari memberikan butang dan item menu kesan 3D.
• Pseudo Elemen: Elemen pseudo mencipta ilusi kedalaman dan tepi bulat.

Demonstrasi yang dipertingkat ini mempamerkan kefungsian penuh menu jejari, dengan bucu bulat, kesan teduhan dan petua pilihan untuk menunjukkan item aktif.

Atas ialah kandungan terperinci Bagaimana untuk Membina Menu Radial dalam CSS Tanpa Imej atau Perpustakaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!