-
Customiser un menu, une liste
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(http://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(http://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(http://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(http://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(http://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(http://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);
}
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 ...! )
Tags : child, menu, nth, transform, scale
-
Commentaires
Bien le bonjour,
vu que je n'ai que 3 cheveux sur la tête, à voir s'il en restera après mes essais : yapuka !
En tout cas merci pour les codes :)bonjour , c'est vraiment super ce que vous faites ! et un beau résultat !
passez une belle année 2015 a+ amicalement
Pas grave , c'est seulement ke ça marche en haut blog et pas billet ni colonne menu, et je passe ke par firefox mais on va pas s'en faire pour ça !
merci et bonne journée@LGR
bah, j'ai testé ton lien (article et pas header) et sous Chrome ça fonctionne ....sauf un léger bémol avec
l'effet scale. Il n'opère qu'une seconde au survol (hover) et revient à sa place.
Comme si il y avait un délai ou un timing, Zarbi ...! Par contre sous FF, niet, rien ........
Mais bon, c'est firefox quoi ..! De + en + lent, et usine à gaz ! et pourtant j'ai une connexion Haut débit (fibre optique).
Vive Chrome !!!LOL VIENS VOIR SI TAS LE TEMPS MERCI
http://la-gentille-rebelle.eklablog.com/costumiser-une-liste-a108598780Merci pour ce test ki m'a donné du fil à retrodre mdr , je l'avais mis sur un blog en essai et là il est en billet
http://la-gentille-rebelle.eklablog.com/customiser-un-menu-une-liste-a108593324
bonne journéeMerci pour ton intervention sur le code d'inverser image de" Pourkoi pas Gilbert", c sympa !!!!! je lui ai fait part !!!!
jai fait billet avec les deux codes pour faire voir la différence, en 3D c'est tres bel effet MERCI
@LGR
Bon, bah j'ai tout bien regardé le Tour de France, et j't'ai point vu .... au bord de la route avec ta casquette Ricard
et ton p'tit drapeau "Vive le Tour!".... !!!C'est juste ke je passe pour te souhaiter une bonne journée
Demain le tour cycliste passe chez moi à Tergnier, vont tout bloquer la circulation pour l'occasion lol
là les espaces verts s'attèle à couper les herbes mdr
laisse tomber papyrock, jai essayer sur leur blog de démo avec id menu et ça fonctionne même aux images ou tu as pas rajouté code
merci pour tout , je m'en souviendrai de ce code
bon dimanchere c'est un rajout ce com !!!
jai mis ke Accueil sur mon blog lol, je commence à comprendre systeme
tu mavait posé kestion "as koi sert duration , et bien c'est la vitesse de la transition
merci j'apprends des chose avec toi mais je crois ke pour ton défi visiteurs je vais souffler un peu !!! mdr !!!
Alors.....prise de tête ce code !!!!!!!
1) - J'ai trouvé le menu avec id="men" alors j'ai laissé. Si tu mets id="menu" c'est tout ton menu-header qui change,
comme ici, dans mon header.
2) - Il semble qu'un truc, quoi ? ...j'ai pas trouvé, bloque les transitions et autres effets CSS avec FF.
3) - J'ai copié ce code sur mon blog, sous chrome c'est impec, sous FF marche pas, Aaaarrrgggghhhhhh !!!!!!!!!
Le comble, mon menu-header (ci-dessus) marche bien sous FF !!!!
4) - J'ai juste modifié sur ton code le 1er lien "Accueil" pour mes essais.....
Bon, je dois m"absenter, alors à + ......!Bonjour , j'ai rajouté au child 6 pour essai
transition:1s;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
et niet ,pas animation sur firefox
je comprends paset puis je voulais aussi savoir pourquoi ke jai cela
<ul id="men">
<li><a href="#">Accueil</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#t">Contact</a></li>
<li><a href="#">Forum Ekla</a></li>
<li><a href="#">Archives</a></li>
</ul>au lieu de cela kan j enregistre ok code source ?????
<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="#t" 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>il est 23h01 et je viens de voir ke la transition marche sur internet explorer et pas firefox alors ke chez toi je vois par firefox , sur cet ordi jai pas google chrome
bon vais dodo , m'aura bien pris la tête ce code !!!!
je suis desole mais javais pas vu ke t'avais rajoute les codes transition kan jai supprimé tout
vais essayer demain , faut ke je fasse souper, mon homme attend lolpour que les effets (animations) se voient, ajoute une transition:
.... {transition:1s;}
...:hover {transition:0.5s;}
et oui si on travail deux dessus ça le fait pas en faite j'étais sur blog essaie et jai collé ce ke javais fais dans billet ke tu connais et jai position haut header
y manque plus ke effet grossissant mais la j'arrete , heure souper merci !!!!Bon, je pense qu'on était à deux à modifier le code et ça ....merdait grave.
Ou alors trop de scripts sur ton blog, qui font buguer l'éditeur...!
Sinon j'ai supprimé le tableau qui mettait des <ul> à chaque ligne .....beurk !!!
Ajouter une transition pour afficher les animations et surtout changer les url des images.
Je ne fais que les 3 premiers liens du menu .....le reste c'est kifkif !Bon j'arrete , jen ai mal à l'estomac !!!! merci kan même mais c'est pas mon niveau
bon fin d'aprem !!!ça y est jai mis 3 car 2 on peut faire billet mais pas modifier, je savais pas !!!
ton background c'est enveloppeMerci, Cassandra.H .... et je suis dispo pour toute aide...enfin dans la mesure de mes capacités (rires..!)
L.G.R, sur quoi essaies-tu le code ???? Menu-header ? derniers visiteurs ? autre ? je vois pas, bigre !!!
Ah, si je vois now ! menu sur fond rouge...!
Permission 2, ok mais sans le module " éditer article ", ça sert à rien !!!EDIT:
il semble que l'image en background déconne (background-image) .... essaie avec:
http://ekladata.com/hE4WRniwPuLEE3TbE3TWm_mXGYk@64x64.png
La class "nth-child" pour la balise <li> ne sert à rien
Enfin ajuste le background-position pour centrer l'image.....Tiens c'est en brouillon ta permission 2 pour voir c' koi ki clochent lol
http://la-gentille-rebelle.eklablog.com/brouillon-c25371390jY ARRIVE PAS !!! jai bien les liens mais pas images pourtant jai mis les :nth-child() en class mais non
c'est en brouillon
en + je suis sur ke pour visiteur c'est même systeme de :nth-child() pour localiser kel visiter et moment à faire bouger
caar jai vu code ya plusieur jours pour rendre insible dernier visiteur et yavait même mots lol
/* Retire le dixième visiteur */
.module_menu_type_lastvisitors .module_menu_contenu_block a:nth-last-child(1) {display:none}Franchement, votre blog est mine d'or! J'étais venue pour un autre tuto mais je pense que je vais également tester celui-ci quand j'aurais un peu de temps. Bonne journée =)
Je tenais à passer par google chrome pour voir visiteur , en effet par ici je vois effet
c chiant ces navigateurs !
promis pas de code source, c'est le jeu !!
Ha bon je vois pas ça sur firefox, ça bouge pas !!! et puis ça fait 1h ke j'essaie code de l'article , pas moyen, ya blème, mais je reviendrai demain car là vais me détendre à la téle
faut mettre nth-child(3) à la plce forum pour kil soit reconnu
là suis pas à la hauteur et puis saloperie de douleurs cervicale ki me lache pas !
j'éteinds à demainOui, mais je parle de l'animation automatique (sans survol) des avatars qui se remuent et grossissent, un coup les uns et
un coup les autres, avec une pose entre.....alors ? hein ? on gamberge ?????
Heu ....code source interdit !!!!!Chouette ton menu du haut habillé par des images, c'est plus stylé ke des encadrements !!!
je vois bien tes derniers visiteurs,
quant à te donner le code lol, c'est une rotation et zoom quant on passe souris sur img
en gros
last visitor img avec transform et rotate mdr !!!
je vais essayer faire code demain , car là esprit moins clair et souper à faire !!!
Bonne soirée et merci
Ajouter un commentaire
Merci je me régal.
Bonne journée.
Amicalement Coaching Dog's.