Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Les menus

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.