Aller au contenu principal

Menu CSS circulaire (Fonctions trigonométriques)



<div class="menu-circulaire"> 

<input type="checkbox" id="ouverture">

<label class="label-circulaire" for="ouverture" arial-label="Ouvrir menu">
<span></span>
</label>

<ul>

<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>

</ul>

</div>




*{box-sizing: border-box}

.menu-circulaire{
	

--radius: 4rem;
position:fixed;
bottom:var(--radius);
right:var(--radius)
	
}
.menu-circulaire input {
	
   display: none;
	
}


.label-circulaire {
	
	
border-radius: 50%;
width: 60px;
aspect-ratio: 1;
display: flex;
align-items:center;
justify-content: center;	
cursor: pointer; 
background: #fff;	
z-index:1;
transition: scale 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
scale:1 1;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
border:1px solid #d9d9d9;
	
	}
	

.label-circulaire:hover {

scale:1.2 1.2 
	
}
	
		
.label-circulaire span{
	
--taille-burger: 30px; 
width: var(--taille-burger);
height: var(--taille-burger);/*aspect-ratio: 1;*/
padding: calc(var(--taille-burger)*.1);
background:
radial-gradient(closest-side at 12.5% 25%,#6753ea 96%,#0000) 0 0/80% 40%,
linear-gradient(#6753ea 50%,#0000 0) top/80% 40% repeat-y;

	
	}
	
.menu-circulaire input:checked+.label-circulaire span{
background: 
radial-gradient(closest-side at 50% 12.5%,#6753ea 96%,#0000) top /20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,#6753ea 96%,#0000) left/80% 20% repeat-x,
conic-gradient(from 90deg at 33% 33%, #0000 90deg, #6753ea 0)100% 100%/60% 60% padding-box content-box;
rotate:45deg;
	
	}



.menu-circulaire input:checked + .label-circulaire {
	
transition: scale 400ms linear;
scale:.8 .8;
	
}

	
.menu-circulaire,
.menu-circulaire ul,
.menu-circulaire ul li,
.menu-circulaire ul li a{
	
	display: grid;
	place-content: center;
	
	}

.menu-circulaire > *,
.menu-circulaire ul li{
	
	grid-area: 1/1;
	
	}
	
	
.menu-circulaire  ul{
	
list-style-type: none;
margin: 0;
padding: 0
	
	}
	
.menu-circulaire input:not(:checked) ~ ul li a{
  
--radius: 0;
--angle: 0;
rotate: 45deg;
	
}

	
.menu-circulaire ul li svg{

fill:white;
height:2rem;
width:2rem
	
	}
	
	

.menu-circulaire ul li a{

background-color: var(--bg);
translate: calc(cos(var(--angle)) * var(--radius)) calc(sin(var(--angle)) * var(--radius) * -1);
rotate:0deg;
transition: translate .25s var(--delai),rotate .25s var(--delai) ;
border-radius: 50%;

	
}

.menu-circulaire ul li a{
width: 3rem;
aspect-ratio: 1;

}

.menu-circulaire ul li:nth-child(1) a{
	
  --bg: #1877F2;
  --angle: 0deg;
  --delai: 0s;
	
}

.menu-circulaire ul li:nth-child(2) a{
	
  --bg: #FCAF45;
  --angle: 60deg;
  --delai: 0.1s;
	
}

.menu-circulaire ul li:nth-child(3) a{
	
  --bg: #1DA1F2;
  --angle: 120deg;
  --delai: 0.2s;
}

.menu-circulaire ul li:nth-child(4) a{
	
  --bg:	#000;
  --angle: 180deg;
  --delai: 0.3s;
	
}

.menu-circulaire ul li:nth-child(5) a{
	
  --bg: #0A66C2; 
  --angle: 240deg;
  --delai: 0.4s;
	
}
	
.menu-circulaire ul li:nth-child(6) a{
	
 --bg: #CD201F;
  --angle: 300deg;
  --delai: 0.5s;
	
}


		
	
.menu-circulaire li a:focus-within{	
	
outline: 2px solid black;

	
	}