Customiser un menu, une liste

03.07.2014

Comment modifier, customiser une liste, ou un menu sans passer par du javascript, jQuery etc....
Uniquement par le biais du CSS ...si, si, c'est possible et tout simple.
On utilise le sélecteur CSS " nth-child() ".
Celui-ci permet de numéroter chaque élément d'une liste, d'un menu.
On spécifie entre les parenthèses le numéro désiré, " nth-child(3) ", ici le 3.
Exemple concret avec le module "rubriques" ci-contre à gauche (Accueil, Forum, Contact),
et le menu du header ci-dessus(#menu), qui se compose comme ceci :

<ul id="menu">
<li><a href="#" sl-processed="1">Accueil</a></li>
<li><a href="#" sl-processed="1">Articles</a></li>
<li><a href="#" sl-processed="1">Forum</a></li>
<li><a href="#" sl-processed="1">Contact</a></li>
<li><a href="#" sl-processed="1">Forum Ekla</a></li>
<li><a href="#" sl-processed="1">Archives</a></li>
</ul>

nth-child(3) correspond à la ligne "Forum", nth-child(6) à "Archives" etc.....
A partir de là, on peut modifier le CSS de ces lignes (<li....></li>)
Par exemple, ci-dessous on modifie la couleur police et la couleur du fond du lien (a) de la ligne "Forum" :

#menu li:nth-child(3) a {
color:red;
background: grey;
}

Bon, ci-dessous le code CSS de mon menu-header, visible ci-dessus dans le header.
J'ai ajouté une image en fond (background-image), un positionnement et une hauteur etc....
Le tout avec une animation au survol (transform:scale(1.5);) et une transition ....

/*-----------------------nth-child(1)--------------------------*/
#menu li:nth-child(1) a {
background-image: url(https://ekladata.com/papyrocktest.eklablog.com/perso
/images/maisonx64.png);
background-repeat: no-repeat;
height: 70px;
background-position: 20px 0px;
padding-top: 60px;
color: white;
font-family: comic sans ms;
font-size:18px;
}
#menu li:nth-child(1) a:hover {
color:yellowgreen;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}
/*-----------------------nth-child(2)--------------------------*/
#menu li:nth-child(2) a {
background-image: url(https://ekladata.com/papyrocktest.eklablog.com/perso
/images/bloc-notes.png);
background-repeat: no-repeat;
height: 70px;
background-position: 20px 0px;
padding-top: 60px;
color: white;
font-family: comic sans ms;
font-size:18px;
}
#menu li:nth-child(2) a:hover {
color:yellowgreen;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}
/*-----------------------nth-child(3)--------------------------*/
#menu li:nth-child(3) a {
background-image: url(https://ekladata.com/papyrocktest.eklablog.com/perso
/images/forum.png);
background-repeat: no-repeat;
height: 70px;
background-position: 20px 0px;
padding-top: 60px;
color: white;
font-family: comic sans ms;
font-size:18px;
}
#menu li:nth-child(3) a:hover {
color:yellowgreen;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}
/*-----------------------nth-child(4)--------------------------*/
#menu li:nth-child(4) a {
background-image: url(https://ekladata.com/papyrocktest.eklablog.com/perso
/images/email.png);
background-repeat: no-repeat;
height: 70px;
background-position: 20px 0px;
padding-top: 60px;
color: white;
font-family: comic sans ms;
font-size:18px;
}
#menu li:nth-child(4) a:hover {
color:yellowgreen;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}
/*-----------------------nth-child(5)--------------------------*/
#menu li:nth-child(5) a {
background-image: url(https://ekladata.com/papyrocktest.eklablog.com/perso
/images/forum-2.png);
background-repeat: no-repeat;
height: 70px;
background-position: 20px 0px;
padding-top: 60px;
color: white;
font-family: comic sans ms;
font-size:18px;
}
#menu li:nth-child(5) a:hover {
color:yellowgreen;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}
/*-----------------------nth-child(6)--------------------------*/
#menu li:nth-child(6) a {
background-image: url(https://ekladata.com/papyrocktest.eklablog.com/perso
/images/archives.png);
background-repeat: no-repeat;
height: 70px;
background-position: 20px 0px;
padding-top: 60px;
color: white;
font-family: comic sans ms;
font-size:18px;
}
#menu li:nth-child(6) a:hover {
color:yellowgreen;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}

Essayez de trouver le code CSS des "avatars derniers visiteurs", menu de gauche, tout en bas....!!!!
Edit: Si vous utilisez Google chrome, les avatars 1,3, et 5, se mettent à remuer après 3s de pause, puis
à grossir....ensuite c'est au tour des avatars 2, 4 et 6 ....( là, je vous aide un peu ...! )