Menu circulaire CSS3 "Path menu"
đĄ Cliquez sur le bouton ci-dessous :
Code :
HTML
<input type="checkbox" id="votre_id">
<label for="votre_id">
<span class="votre_class">
</span>
</label>
<ul class="votre_menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
*{box-sizing: border-box}
ul{padding: 0}
#votre_id {display:none /*on cache l'id*/}
#votre_id+label {
position: absolute;
top: 0;
left: 0;
height: 70px;
width: 70px;
cursor: pointer;
z-index: 1;
background: linear-gradient(to bottom,#fff,#ccc);
box-shadow: 0 0 5px rgba(0,0,0,.2)
}
#votre_id+label:before{
content:'â°';
height:70px;
font-size:3rem;
display:flex;
justify-content:center;
align-items:center
}
.liste_votre_menu li{
position: absolute;
top: 0;
left: 0
}
/*effets menu apparition*/
#votre_id:checked ~ .liste_votre_menu li:nth-child(1){
animation: apparition1 .2s forwards 1.25s
}
#votre_id:checked ~ .liste_votre_menu li:nth-child(2){
animation: apparition2 .2s forwards 1s
}
#votre_id:checked ~ .liste_votre_menu li:nth-child(3){
animation: apparition3 .2s forwards .75s
}
#votre_id:checked ~ .liste_votre_menu li:nth-child(4){
animation: apparition4 .2s forwards .50s
}
#votre_id:checked ~ .liste_votre_menu li:nth-child(5){
animation: apparition5 .2s forwards .25s
}
/*effets menu disparition*/
#votre_id:not(:checked) ~ .liste_votre_menu li:nth-child(1){
animation: disparition1 1s forwards
}
#votre_id:not(:checked) ~ .liste_votre_menu li:nth-child(2){
animation: disparition2 .75s forwards
}
#votre_id:not(:checked) ~ .liste_votre_menu li:nth-child(3){
animation: disparition3 .50s forwards
}
#votre_id:not(:checked) ~ .liste_votre_menu li:nth-child(4){
animation: disparition4 .25s forwards
}
#votre_id:not(:checked) ~ .liste_votre_menu li:nth-child(5){
animation: disparition5 .10s forwards
}
/*animation*/
@keyframes apparition1{
0%{
transform: translate(0,0) rotate(540deg);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
80%{
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(160px,120px) rotate(0)}
}
@keyframes disparition1{
0%{
transform: translate(200px,100px) rotate(0);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
70%{
transform: translate(228px,0) rotate(360deg);
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(0,0) rotate(540deg)}
}
@keyframes apparition2{
0%{
transform: translate(0,0) rotate(540deg);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
80%{
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(200px,60px) rotate(0)}
}
@keyframes disparition2{
0%{
transform: translate(200px,60px) rotate(0);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
70%{
transform: translate(213px,0) rotate(360deg);
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(0,0) rotate(540deg)
}
}
@keyframes apparition3{
0%{
transform: translate(0,0) rotate(540deg);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
80%{
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(240px,0) rotate(0)}
}
@keyframes disparition3{
0%{
transform: translate(220px,0) rotate(0);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
70%{
transform: translate(223px,0) rotate(360deg);
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(0,0) rotate(540deg)}
}
@keyframes apparition4{
0%{
transform: translate(0,0) rotate(540deg);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
80%{
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(200px,-60px) rotate(0)}
}
@keyframes disparition4{
0%{
transform: translate(180px,0) rotate(0);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
70%{
transform: translate(183px,0) rotate(360deg);
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(0,0) rotate(540deg)}
}
@keyframes apparition5{
0%{
transform: translate(0,0) rotate(540deg);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
80%{
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(160px,-120px) rotate(0)}
}
@keyframes disparition5{
0%{
transform: translate(140px,0) rotate(0);
animation-timing-function: cubic-bezier(1,.6,.57,.75)
}
70%{
transform: translate(153px,0) rotate(360deg);
animation-timing-function: cubic-bezier(.45,.97,.51,.78)
}
100%{
transform: translate(0,0) rotate(540deg)
}
}
Source, inspiration, ressources :
DĂ©monstration avec JQuery
Vous rencontrez un problÚme avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.