Menu dynamique

07.08.2014

Ce menu fait 880px de large.

Ci-dessous, le code à copier,
la première partie est le html avec les 5 éléments du menu
En bleu , les adresses vers lesquelles pointent chaque bouton: à remplacer par vos adresses.
En orange, les icones et les titres des boutons, que vous pouvez également remplacer par d'autres titres...

Entre les balises <style>, il s'agit du sytle des boutons.
J'ai mis quelques commentaires entre /* et */ sur les valeurs que vous pouvez également changer pour personnaliser votre menu dynamique.

<ul class="menudyn">
<li><a href="http://BOUTONMUSIQUE"> <span class="mn-icon">♫</span></a>
<div class="mn-titre">Musique</div>
</li>
<li><a href="http://BOUTONPHOTOS"> <span class="mn-icon">◘</span></a>
<div class="mn-titre">Photos</div>
</li>
<li><a href="http://BOUTON3"> <span class="mn-icon">&diams;</span></a>
<div class="mn-titre">Infos</div>
</li>
<li><a href="http://BOUTON4"> <span class="mn-icon">♀</span></a>
<div class="mn-titre">For girl only</div>
</li>
<li><a href="http://BOUTON5"> <span class="mn-icon">↕</span></a>
<div class="mn-titre">Support</div>
</li>
</ul>
<style><!--
.menudyn{
padding: 0 0 0 48px;
margin: 20px auto;
width: 880px;
}
.menudyn li{/*style boutons*/
width: 160px;
height: 160px;
border: 8px solid #f6f6f6; /*bordure epaisseur et couleur*/
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-left: -20px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.menudyn li:last-child{
margin-right: 0px;
}
.menudyn li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.mn-icon{/*style icone*/
font-size: 40px;
color: #FBE7E6;/*couleur rose clair*/
line-height: 60px;
position: absolute;
width: 100%;
height: 60px;
left: 0px;
top: 20px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.mn-titre {/*style titre*/
font-size: 20px;
font-weight:bold;
position: absolute;
top: 104px;
height: 80px;
width: 110px;
left: 50%;
margin-left: -50px;
opacity: 0.8;
text-align: center;
color: #555;
}

/*style survol souris*/

.menudyn li:hover{
border-color: #333;
z-index: 999;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.menudyn li:hover .mn-icon{
color: #000;
font-size: 60px;
text-shadow: 0px 0px 1px #000;
-webkit-animation: moveFromBottom 300ms ease;
-moz-animation: moveFromBottom 300ms ease;
-ms-animation: moveFromBottom 300ms ease;
}
.menudyn li:hover .mn-titre{
color: #000;
-webkit-animation: moveFromBottom 500ms ease;
-moz-animation: moveFromBottom 500ms ease;
-ms-animation: moveFromBottom 500ms ease;
}

@-webkit-keyframes moveFromBottom {
from {
-webkit-transform: translateY(200%) scale(0.5);
opacity: 0;
}
to {
-webkit-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-moz-keyframes moveFromBottom {
from {
-moz-transform: translateY(200%) scale(0.5);
opacity: 0;
}
to {
-moz-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-ms-keyframes moveFromBottom {
from {
-ms-transform: translateY(200%) scale(0.5);
opacity: 0;
}
to {
-ms-transform: translateY(0%) scale(1);
opacity: 1;
}
}
--></style>