Agence web créative 44

Menu

Simple menu animé en css3

Nous allons créer une simple animation en css3 sur l’affichage d’une liste.
Cela peut être utile pour apporter un peu d’animation sur un menu vertical.

Nous allons utiliser la propriété “transition” proposé par le css3 pour créer une animation sur différents éléments (le background, le padding, la couleur…) et nous allons utiliser la propriété “transform” pour faire pivoter la liste du menu qui sera créée avec le selecteur :before.

menu-anime

Voilà le lien pour visualiser le rendu final :

Demo

Voilà le code html de l’exemple (nous travaillerons en html5) :

<head>
<meta charset="UTF-8" />
<title>Menu animé</title>
<link href='http://fonts.googleapis.com/css?family=Exo+2|Bubbler+One' rel='stylesheet' type='text/css'>
</head>

<body>
<ul>
    <li><a href="#">Le premier menu</a></li>
    <li><a href="#">Le second menu</a></li>
    <li><a href="#">Le troisième menu</a></li>
    <li><a href="#">Le quatrième menu</a></li>
    <li><a href="#">Le cinquième menu</a></li>
    <li><a href="#">Le sixième menu</a></li>
    <li><a href="#">Le septième menu</a></li>
</ul>
</body>
</html>

Voici le code Css3 :

body{
    background:url(../images/tweed.png) repeat;
}
.menu{
    display:block; 
    background:#3f3f3f; 
    margin:0 auto; 
    padding:20px; 
    width:260px;
    box-shadow:0 1px 3px #171717;
}
.menu li{
    display:block; 
    padding:8px 10px 8px 5px; 
    margin:0;
    border-bottom:solid 1px #2e2e2e;
    border-top:solid 1px #4c4c4c;
}
.menu li:first-child{border-top:none;} /* le selecteur first-child permet 
de cibler le premier élément pour lui enlever la bordure */
.menu li:last-child{border-bottom:none;} /* le selecteur last-child permet 
de cibler le dernier élément pour lui enlever la bordure */

.menu li a:before{/* création de la puce avec le selecteur before 
et l'élément content */
    content:''; 
    display:inline-block; 
    width:5px; 
    height:5px; 
    background:#707575; 
    margin-right:8px; 
    margin-bottom:4px;
}
.menu li a{
    font-family: 'Exo 2', sans-serif;
    font-size:20px; 
    color:#707575; 
    text-decoration:none;
    text-shadow:0 1px 1px #171717; /* ombre portée d'1px */
}
/* transition */
.menu li,
.menu li:hover,
.menu li a, 
.menu li:hover a,  
.menu li a:before, 
.menu li:hover a:before{transition : all .4s ease-out;} /* le temps de 
transition sera de 0.4 seconde */

.menu li:hover a:before{
    background:#1dd9e0; 
    width:8px; /* on agrandi la taille du carré lors du survol de la liste */
    height:8px;
    margin-right:10px; /* on déplace également le carré */ 
    margin-bottom:2px; 
    transform:rotate(405deg); /* on fait faire une rotation de la puce */
    -webkit-transform:rotate(405deg); /* pour google chrome, safari et android */
    box-shadow:0 0 4px #39f8ff /* on change l'ombre portée en bleu et diffuse */
}
.menu li:hover a{
    padding:0 0 0 10px; /* au survol de la liste on déplace le lien en lui 
donnant un padding de 10px à gauche */
    color:#1dd9e0;
    text-shadow:0 0 4px #39f8ff; /* on lui apporte une ombre portée */
}

N’hésitez pas à me donner votre avis ou à me poser vos questions.

Laissez un commentaire