• 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);
    }

     

    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 ...! )
    « Fenêtre modale (pop-in)Page maintenance »

    Tags Tags : , , , ,
  • Commentaires

    35
    Mercredi 5 Février 2020 à 09:06

    Merci je me régal.

    Bonne journée.

    Amicalement Coaching Dog's.

    34
    Mardi 10 Décembre 2019 à 09:10
    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 :)
    33
    Samedi 18 Août 2018 à 11:44

    tu es un champion dans le domaine

    merci de tout ce partage

    amitiés

    nathie

    32
    Lundi 9 Novembre 2015 à 19:57

    Merci pour ces précieux renseignements

    http://riri-linventeur.wix.com/les-debrouillards

    31
    Mardi 6 Janvier 2015 à 20:38

    Bonne Année Mike ! Bises

    30
    Mardi 6 Janvier 2015 à 15:48

    bonjour , c'est vraiment super ce que vous faites  ! et un beau résultat  !  

    passez une belle année 2015  a+  amicalement   

    29
    Mardi 2 Décembre 2014 à 13:57

    Coucou Mike. Je passe juste te faire un petit coucou  smile

    Amitiés. Dani

    28
    Vendredi 18 Juillet 2014 à 11:19
    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
    27
    Vendredi 18 Juillet 2014 à 11:06

    @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 glasses !!!

     

    26
    Vendredi 18 Juillet 2014 à 09:50
    25
    Vendredi 18 Juillet 2014 à 08:17
    Merci 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ée
    24
    Jeudi 17 Juillet 2014 à 13:26

    Merci 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

    23
    Mercredi 16 Juillet 2014 à 22:43

    super Merci pour ce tuto, je vais m'amuser à customiser le mien aussi. ^^

    22
    Jeudi 10 Juillet 2014 à 18:54

    @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!"....wink2 !!!

    21
    Mercredi 9 Juillet 2014 à 10:36

    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

     

    20
    Dimanche 6 Juillet 2014 à 11:52

    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 dimanche

     

    re  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 !!!

    19
    Dimanche 6 Juillet 2014 à 10:35

    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 à + ......!

    18
    Dimanche 6 Juillet 2014 à 09:28

    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 pas

    17
    Samedi 5 Juillet 2014 à 22:39

    et 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 !!!!

    16
    Samedi 5 Juillet 2014 à 22:33

    Re jai mis duration dans chaque truc et ça marche pas pfffff !!!!

    15
    Samedi 5 Juillet 2014 à 20:12
    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 lol
    14
    Samedi 5 Juillet 2014 à 20:06

    pour que les effets (animations) se voient, ajoute une transition:

    .... {transition:1s;}

    ...:hover {transition:0.5s;}

    13
    Samedi 5 Juillet 2014 à 20:00

    ah jai héberger tes image et mis lien dans code

    12
    Samedi 5 Juillet 2014 à 19:58
    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 !!!!
    11
    Samedi 5 Juillet 2014 à 19:36

    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 !


    10
    Samedi 5 Juillet 2014 à 18:36
    Bon j'arrete , jen ai mal à l'estomac !!!! merci kan même mais c'est pas mon niveau
    bon fin d'aprem !!!
    9
    Samedi 5 Juillet 2014 à 17:51
    ça y est jai mis 3 car 2 on peut faire billet mais pas modifier, je savais pas !!!
    ton background c'est enveloppe
    8
    Samedi 5 Juillet 2014 à 17:13

    Merci, 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.....

    7
    Samedi 5 Juillet 2014 à 16:23
    Tiens c'est en brouillon ta permission 2 pour voir c' koi ki clochent lol
    http://la-gentille-rebelle.eklablog.com/brouillon-c25371390
    6
    Samedi 5 Juillet 2014 à 16:18
    jY 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}
    5
    Samedi 5 Juillet 2014 à 15:27

    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 =)

    4
    Jeudi 3 Juillet 2014 à 21:53

    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 !! 

    3
    Jeudi 3 Juillet 2014 à 21:48
    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 à demain
    2
    Jeudi 3 Juillet 2014 à 21:24

    Oui, 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 !!!!!

    1
    Jeudi 3 Juillet 2014 à 19:31
    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

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)