Guillaume Duverger - Développement & Graphisme - Blog

Flexible CSS menu

NB : Meilleur rendu sur Firefox

Code :

<ul class=flexible>
<li>
<a href="">
<svg height="50" width="50" viewBox="0 0 512 512"><path fill="#f05540" d="M382.933 73.6H441.6V176h-58.667z"/><path fill="#f3705a" d="M360.533 21.333H464V76.8H360.533z"/><path d="M44.8 276.267V512h418.133V276.267L253.866 67.2C172.8 149.333 126.933 195.2 44.8 276.267z" fill="#ffd15c"/><path d="M464 276.267L254.933 67.2c-41.6 40.533-73.6 72.533-105.6 104.533L44.8 276.266v48l209.067-209.067 209.067 209.067v6.4-54.4H464z" fill="#f7b64c"/><path d="M216.533 512H90.667V388.267c0-35.2 28.8-62.933 62.933-62.933 35.2 0 62.933 28.8 62.933 62.933V512z" fill="#415a6b"/><path fill="#344a5e" d="M253.867 325.333h164.267v144H253.867z"/><g fill="#8ad7f8"><path d="M270.933 342.4h56.533v109.867h-56.533zM344.533 342.4h56.533v109.867h-56.533z"/></g><path d="M502.4 232.533L279.467 9.6c-12.8-12.8-35.2-12.8-48 0L9.6 232.533c-12.8 12.8-12.8 35.2 0 48 12.8 12.8 35.2 12.8 48 0L256 82.133l198.4 198.4c12.8 12.8 35.2 12.8 48 0 12.8-13.866 12.8-35.2 0-48z" fill="#f3705a"/></svg>
<span>Accueil</span>
</a>
<li>
<a href="">
<svg height="50" width="50" viewBox="0 -44 512 512"><path d="M205.484 355.094h101.032v55.863H205.484zm0 0" fill="#2c6a9b"/><path d="M205.488 355.094h101.024v17.386H205.488zm0 0" fill="#1a5a84"/><path d="M354.215 424.727h-196.43a9.317 9.317 0 0 1-9.316-9.317c0-5.144 4.172-9.312 9.316-9.312h196.43a9.31 9.31 0 0 1 9.312 9.312c0 5.145-4.168 9.317-9.312 9.317zm0 0M512 15.762v331.793c0 5.808-4.707 10.508-10.52 10.508H10.52c-5.813 0-10.52-4.7-10.52-10.508V15.762C0 7.059 7.066 0 15.773 0h480.454C504.94 0 512 7.059 512 15.762zm0 0" fill="#dceeef"/><path d="M512 15.762V347.55a10.505 10.505 0 0 1-10.512 10.512h-22.875a10.505 10.505 0 0 0 10.512-10.512V15.76c0-8.698-7.059-15.757-15.77-15.757h22.875c8.711 0 15.77 7.059 15.77 15.758zm0 0" fill="#bcdde2"/><path d="M282.32 77.813H512v134.55H282.32zm0 0" fill="#3bc3ff"/><path d="M489.125 77.813H512v134.55h-22.875zm0 0" fill="#009af2"/><path d="M452.063 151.16a10.3 10.3 0 0 1 1.476 9.219l-14.187 44.02-2.575 7.964H318.09l8.719-23.09c.265-.695.601-1.363 1.007-1.988l4.676-7.164c3.055-4.684 1.813-10.945-2.793-14.113l-27.336-18.805a10.343 10.343 0 0 0-4.625-1.742l-15.418-1.82V77.809h162.965L433.75 99.62a10.313 10.313 0 0 1-8.402 5.461l-49.809 3.422a10.31 10.31 0 0 0-5.742 2.246l-18.152 14.578a10.3 10.3 0 0 0-2.98 12.184l4.64 10.539a10.301 10.301 0 0 0 11.14 6.008l73.633-12.418a10.3 10.3 0 0 1 10.043 4.097zm0 0" fill="#8dffa2"/><path d="M282.32 0v358.063H10.52c-5.813 0-10.52-4.7-10.52-10.508V15.762C0 7.059 7.066 0 15.773 0zm0 0" fill="#4c94c3"/><path d="M512 15.762v22.5H0v-22.5C0 7.059 7.066 0 15.773 0h480.454C504.94 0 512 7.059 512 15.762zm0 0" fill="#8bc1c6"/><path d="M512 307.648v39.903a10.505 10.505 0 0 1-10.512 10.512H10.512A10.505 10.505 0 0 1 0 347.55v-39.903zm0 0" fill="#3b7ca8"/><path d="M512 307.648v39.903a10.505 10.505 0 0 1-10.512 10.512h-22.875a10.505 10.505 0 0 0 10.512-10.512v-39.903zm0 0" fill="#2c6a9b"/><path d="M49.512 92.004h-.473c-4.266 0-7.723-3.461-7.723-7.727s3.457-7.726 7.723-7.726h.473c4.27 0 7.726 3.46 7.726 7.726s-3.457 7.727-7.726 7.727zm0 0M102.504 92.004H73.656c-4.265 0-7.722-3.461-7.722-7.727s3.457-7.726 7.722-7.726h28.848c4.266 0 7.726 3.46 7.726 7.726s-3.46 7.727-7.726 7.727zm0 0" fill="#ff8980"/><g fill="#8dffa2"><path d="M49.512 117.484h-.473a7.723 7.723 0 0 1-7.723-7.726 7.725 7.725 0 0 1 7.723-7.727h.473c4.27 0 7.726 3.461 7.726 7.727a7.724 7.724 0 0 1-7.726 7.726zm0 0M138.215 117.484H73.656a7.723 7.723 0 0 1-7.722-7.726 7.725 7.725 0 0 1 7.722-7.727h64.559c4.27 0 7.726 3.461 7.726 7.727a7.724 7.724 0 0 1-7.726 7.726zm0 0M49.512 142.969h-.473a7.725 7.725 0 0 1-7.723-7.727 7.723 7.723 0 0 1 7.723-7.726h.473a7.724 7.724 0 0 1 7.726 7.726 7.726 7.726 0 0 1-7.726 7.727zm0 0M120.36 142.969H73.655a7.725 7.725 0 0 1-7.722-7.727 7.723 7.723 0 0 1 7.722-7.726h46.703a7.724 7.724 0 0 1 7.727 7.726 7.726 7.726 0 0 1-7.727 7.727zm0 0M49.512 168.45h-.473c-4.266 0-7.723-3.462-7.723-7.727s3.457-7.727 7.723-7.727h.473c4.27 0 7.726 3.461 7.726 7.727s-3.457 7.726-7.726 7.726zm0 0M191.785 168.45h-74.86a7.726 7.726 0 1 1 0-15.454h74.86c4.27 0 7.727 3.461 7.727 7.727s-3.457 7.726-7.727 7.726zm0 0M95.637 168.45h-21.98c-4.266 0-7.723-3.462-7.723-7.727s3.457-7.727 7.722-7.727h21.98c4.266 0 7.723 3.461 7.723 7.727s-3.457 7.726-7.722 7.726zm0 0"/></g><path d="M49.512 193.93h-.473a7.723 7.723 0 0 1-7.723-7.727 7.725 7.725 0 0 1 7.723-7.726h.473c4.27 0 7.726 3.46 7.726 7.726a7.724 7.724 0 0 1-7.726 7.727zm0 0M138.215 193.93H73.656a7.723 7.723 0 0 1-7.722-7.727 7.725 7.725 0 0 1 7.722-7.726h64.559c4.27 0 7.726 3.46 7.726 7.726a7.724 7.724 0 0 1-7.726 7.727zm0 0M49.512 219.41h-.473a7.722 7.722 0 0 1-7.723-7.722 7.723 7.723 0 0 1 7.723-7.727h.473a7.724 7.724 0 0 1 7.726 7.726 7.723 7.723 0 0 1-7.726 7.723zm0 0M138.215 219.41H73.656a7.722 7.722 0 0 1-7.722-7.722 7.723 7.723 0 0 1 7.722-7.727h64.559a7.724 7.724 0 0 1 7.726 7.726 7.723 7.723 0 0 1-7.726 7.723zm0 0" fill="#8df4ff"/><path d="M49.512 244.895h-.473c-4.266 0-7.723-3.461-7.723-7.727s3.457-7.727 7.723-7.727h.473c4.27 0 7.726 3.461 7.726 7.727s-3.457 7.727-7.726 7.727zm0 0M197.52 244.895h-24.965a7.726 7.726 0 1 1 0-15.454h24.965c4.27 0 7.726 3.461 7.726 7.727s-3.457 7.727-7.726 7.727zm0 0M149.89 244.895H73.657c-4.265 0-7.722-3.461-7.722-7.727s3.457-7.727 7.722-7.727h76.235c4.27 0 7.726 3.461 7.726 7.727s-3.457 7.727-7.726 7.727zm0 0M49.512 270.375h-.473a7.723 7.723 0 0 1-7.723-7.727 7.722 7.722 0 0 1 7.723-7.722h.473a7.723 7.723 0 0 1 7.726 7.722 7.724 7.724 0 0 1-7.726 7.727zm0 0M138.215 270.375H73.656a7.723 7.723 0 0 1-7.722-7.727 7.722 7.722 0 0 1 7.722-7.722h64.559a7.723 7.723 0 0 1 7.726 7.722 7.724 7.724 0 0 1-7.726 7.727zm0 0M162.832 270.375h-.473a7.723 7.723 0 0 1-7.722-7.727 7.722 7.722 0 0 1 7.722-7.722h.473a7.723 7.723 0 0 1 7.727 7.722 7.724 7.724 0 0 1-7.727 7.727zm0 0M127.012 92.004h-.473c-4.266 0-7.727-3.461-7.727-7.727s3.461-7.726 7.727-7.726h.473c4.27 0 7.726 3.46 7.726 7.726s-3.457 7.727-7.726 7.727zm0 0" fill="#ff8980"/><path d="M141.395 142.969h-.47a7.726 7.726 0 0 1-7.726-7.727 7.724 7.724 0 0 1 7.727-7.726h.469a7.724 7.724 0 0 1 7.726 7.726 7.726 7.726 0 0 1-7.726 7.727zm0 0" fill="#8dffa2"/><path d="M183.484 270.375h-.472a7.725 7.725 0 0 1 0-15.45h.472a7.723 7.723 0 0 1 7.727 7.723 7.724 7.724 0 0 1-7.727 7.727zm0 0M224.031 244.895h-.472a7.726 7.726 0 1 1 0-15.454h.472c4.27 0 7.727 3.461 7.727 7.727s-3.457 7.727-7.727 7.727zm0 0" fill="#ff8980"/><path d="M162.598 219.781h-.473a7.723 7.723 0 0 1-7.727-7.722c0-4.27 3.461-7.727 7.727-7.727h.473a7.725 7.725 0 0 1 0 15.45zm0 0M162.598 193.93h-.473a7.724 7.724 0 0 1-7.727-7.727 7.729 7.729 0 0 1 7.727-7.726h.473a7.726 7.726 0 1 1 0 15.453zm0 0M183.484 219.781h-.472a7.723 7.723 0 0 1-7.727-7.722c0-4.27 3.461-7.727 7.727-7.727h.472a7.724 7.724 0 0 1 7.727 7.727 7.723 7.723 0 0 1-7.727 7.722zm0 0M204.371 219.781h-.473a7.725 7.725 0 1 1 0-15.449h.473a7.724 7.724 0 0 1 7.727 7.727 7.723 7.723 0 0 1-7.727 7.722zm0 0M225.262 219.781h-.473a7.723 7.723 0 0 1-7.726-7.722 7.724 7.724 0 0 1 7.726-7.727h.473a7.723 7.723 0 0 1 7.722 7.727 7.722 7.722 0 0 1-7.722 7.722zm0 0" fill="#8df4ff"/><path d="M484.387 244.895H339.176a7.726 7.726 0 1 1 0-15.454h145.21a7.725 7.725 0 0 1 7.723 7.727 7.723 7.723 0 0 1-7.722 7.727zm0 0M317.363 244.895h-7.43c-4.265 0-7.722-3.461-7.722-7.727s3.457-7.727 7.723-7.727h7.43c4.269 0 7.726 3.461 7.726 7.727.004 4.266-3.457 7.727-7.727 7.727zm0 0M455.145 286.379H309.937a7.724 7.724 0 0 1-7.726-7.727 7.726 7.726 0 0 1 7.726-7.726h145.208a7.726 7.726 0 1 1 0 15.453zm0 0M484.387 286.379h-7.434a7.723 7.723 0 0 1-7.723-7.727 7.725 7.725 0 0 1 7.723-7.726h7.434a7.725 7.725 0 0 1 7.722 7.726 7.723 7.723 0 0 1-7.722 7.727zm0 0M484.387 265.637H309.934c-4.266 0-7.723-3.461-7.723-7.727s3.457-7.726 7.723-7.726h174.453a7.725 7.725 0 0 1 7.722 7.726 7.723 7.723 0 0 1-7.722 7.727zm0 0" fill="#4c94c3"/></svg>
<span>Développement</span>        
</a>
<li>
<a href="">
<svg height="50" width="50" viewBox="0 0 512 512"><path d="M469.574 363.508l-31.82 10.606 10.606-31.82-21.213-21.213-31.82 10.607 10.607-31.82-63.64-63.64-53.033 53.033-53.033 53.033L405.934 512l53.033-53.033L512 405.934z" fill="#f6d401"/><path d="M469.574 363.508l-31.82 10.606 10.606-31.82-21.213-21.213-31.82 10.607 10.607-31.82-63.64-63.64-53.033 53.033 169.706 169.706L512 405.934z" fill="#fd9d34"/><path d="M352.83 352.904l53.024-53.025 21.21 21.21-53.025 53.025zM395.246 395.33l53.025-53.025 21.21 21.21-53.025 53.025z" fill="#ec5b20"/><path d="M181.312 117.673l10.607-31.82-21.213-21.213-31.82 10.606 10.606-31.82L107.066 1 54.033 54.033 1 107.066l169.706 169.706 53.033-53.033 53.033-53.033-63.64-63.64z" fill="#f6d401"/><path d="M213.132 107.066l-31.82 10.607 10.607-31.82-21.213-21.213-31.82 10.606 10.606-31.82L107.066 1 54.033 54.033l169.706 169.706 53.033-53.033z" fill="#fd9d34"/><path d="M96.443 96.463l53.025-53.025 21.21 21.21-53.025 53.025zM138.86 138.89l53.025-53.026 21.21 21.21L160.07 160.1z" fill="#ec5b20"/><path d="M244.669 330.97l-31.82-31.819-31.819-31.82h-42.427L32.537 373.397v42.426l31.82 31.82 31.82 31.82h42.426l106.066-106.066z" fill="#e1ebf0"/><path d="M138.603 479.463l106.066-106.066V330.97l-31.82-31.819L64.357 447.643l31.82 31.82z" fill="#cde1e6"/><path d="M450.835 112.872l-25.854-25.853-25.853-25.854-48.393-5.966-212.132 212.132 53.033 53.033 53.033 53.033 212.132-212.132z" fill="#57d9ad"/><path d="M456.801 161.265l-5.966-48.393-25.854-25.853-233.345 233.345 53.033 53.033z" fill="#26bfa6"/><path d="M424.981 87.019l-10.606-10.607-169.706 169.706 10.607 10.606 10.606 10.607L435.588 97.625z" fill="#26bfa6"/><path d="M424.951 86.977l10.605 10.605-169.68 169.68-10.605-10.605z" fill="#19a690"/><path d="M85.57 426.43l-53.033-53.033-10.607 10.606c-29.241 29.241-29.241 76.825 0 106.066s76.825 29.241 106.066 0l10.607-10.607z" fill="#474f54"/><path d="M127.997 490.07l10.607-10.607L85.57 426.43l-63.64 63.64c29.241 29.24 76.826 29.24 106.067 0z" fill="#474f54"/><path d="M149.21 362.79l-10.607-10.606-21.213 21.213 10.607 10.606 10.606 10.607 21.213-21.213z" fill="#cde1e6"/><path d="M149.234 362.737l10.605 10.605-21.21 21.21-10.605-10.605z" fill="#b4d2d7"/><path d="M512 0L350.735 55.199l53.033 53.033 53.033 53.033z" fill="#ffdfcf"/><path d="M512 0L403.768 108.232l53.033 53.033z" fill="#ffcebf"/></svg>
<span>Graphisme</span>      
</a>
<li>
<a href="">
<svg height="50" width="50" viewBox="0 0 64 64"><path d="M61 27L51 37h-3V14z" fill="#ee8700"/><path d="M48 7v30H16V7a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4z" fill="#5aaae7"/><path d="M32.12 27.12a2 2 0 0 0 2.83 0l.71-.7 2.83 2.83-.71.7a5.01 5.01 0 0 1-7.07 0l-5.66-5.66a5 5 0 0 1 0-7.07l.71-.7 2.83 2.83-.71.7a2 2 0 0 0 0 2.83z" fill="#e6e7e8"/><g fill="#ff9811"><path d="M36.36 22.88l5.66 5.66-1.41 1.41a1.008 1.008 0 0 1-1.42 0l-.7-.7-2.83-2.83-.71-.71a1.008 1.008 0 0 1 0-1.42zM26.46 12.98l5.66 5.66-1.41 1.41a1.008 1.008 0 0 1-1.42 0l-.7-.7-2.83-2.83-.71-.71a1.008 1.008 0 0 1 0-1.42zM38 3v2a2.006 2.006 0 0 1-2 2h-8a2.006 2.006 0 0 1-2-2V3z"/></g><path d="M16 14v23h-3L3 27z" fill="#ee8700"/><path d="M61 27v32a2.006 2.006 0 0 1-2 2H5a2.006 2.006 0 0 1-2-2V27l10 10h38z" fill="#ffa733"/><path d="M50 16v21h-2V14z" fill="#cc7400"/></svg>
<span>Contact</span>
</a>
</ul>

.flexible {

display: flex;
flex-flow: column;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
border-radius: 8px;
margin: auto
	
}
	

.flexible li{

background: linear-gradient(white,#e8e8e8);

}
	

.flexible li a {
	
display:grid;
grid:4rem/60px 1fr;
place-items:center;
transition: grid-template-columns .4s ;
text-decoration: none;
color: currentcolor;
text-shadow: 0 1px 0 white;
	
}
		

	
@media (min-width:62.75rem){
		
.flexible {

flex-flow: row
	
	}
	
.flexible li:not(:last-child) {

border-right:1px solid rgba(0, 0, 0, 0.17);

	}
	

.flexible li span{

padding:0 .5rem

}	

.flexible li a {

grid-template-columns: 0 1fr;

 
}
	
.flexible li:hover a{

color:currentcolor;
grid-template-columns: 80px 1fr;
	
}
	
.flexible svg {

opacity:0;
transform:scale(0);
transition:opacity .4s ,transform .4s ;
	
}	
	
.flexible li:hover svg {
	
opacity:1;
transform:scale(1);
	
}
	
	}

Support navigateurs :

Flexbox

Grid layout