• Contenu du module qui se déroule au survol souris

     

     En cachant le contenu d'un module de liens ou module derniers articles

    la liste des titres des liens ou images/liens 

     se déroule au survol de la souris

    trouvé chez mike ( modules "rubriques" et "articles news")http://papyrocktest.eklablog.com/accueil-c17959473

     

    Un exemple avec un Module derniers articles

     

    /*cacher contenu module , merci mike*/
     #module_menu_contenu1472037 ul{ /* il faut mettre le numero de son module*/
    transition: 3s;  /* pour regler le temps pour apparaitre*/
    -moz-transition: 3s; /* Firefox 4 */
    -webkit-transition: 3s; /* Safari and Chrome */
    -o-transition: 3s; /* Opera */
    opacity: 0.5/* style des liens au depart  tend vers 0 pour transparence*/
    height:22px; /* hauteur de la boite fermee*/
    width:100%; /*largeur qu'occupe la boite dans sa colonne*/ }

    #module_menu_contenu1472037 ul: hover { /* hover pour le style des liens au passage de la souris*/
    opacity: 1/* pas de transparence*/
    height:200px;/* hauteur de la boite ouverte*/ }

    Pour les modules simples html, on laisse apparent le haut du contenu

    qui se déroule au survol souris

    Penser à mettre le numéro de son module à la place des XXXXXXXXX

     

    Module html simple

    • Afrique racines

    ALBUMS

    • Crayons cire

    crayons 

    #module_menu_contenuXXXXXXXXX .module_menu_contenu_block{
    height: 28px; /* hauteur apparente du contenu du module*/
    width: 100%;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
      }

    #module_menu_contenuXXXXXXXXX .module_menu_contenu_block:hover{
    left:0px;
    height:200px; /*hauteur du module au survol souris*/
    overflow:auto;/* pour faire apparaitre barre de défilement si module plus haut que le height mis au dessus*/
      }

    « Couleurs par nom anglaisDiapo 9 images défilement click numéro sans javascript »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Dimanche 9 Novembre 2014 à 23:07

    Intéressant cet article, comment insérer ce module sur mes blogs

    2
    Mardi 11 Novembre 2014 à 18:27

    Bonsoir Nadine, 

    Pour quel blog et quel(s) module(s)  des menus latéraux veux-tu installer cet effet ?

    car il faut mettre le numéro du module dans le code CSS pour qu'il s'applique à ce module en particulier...

    3
    Mardi 11 Novembre 2014 à 21:17
    Le CSS se trouve bien dans le menu déroulant
    Modifier Thème
    Contenus
    Ajouter du CSS
    Et puis il n'y a rien
    Avec Kiwi OB on voyait tout et on m'expliquait à la lettre près où je devais indiquer le css
    4
    Mercredi 12 Novembre 2014 à 12:29
    Bonjour Nadine,
    Il y a une infoBulle 'point d'interrogation' quand on arrive sur la fenêtre "ajouter du CSS".
    Dans le tableau avec les lignes numérotées ( chez toi, si il est vide, c'est que tu n'as pas encore ajouté de CSS), tu copies -avec curseur sur première ligne- le CSS que tu veux ajouter.
    Si tu me dis pour quel module, pourcommencer, tu veux le style décrit dans cet article, je te recherche son numéro et te donne le CSS exact à ajouter sur la première ligne de l'éditeur de CSS. Bonne journée
    5
    Mercredi 19 Novembre 2014 à 12:31

    Bonjour,

    J'ai mie le code dans le css en mettant le code du module mais ça n'a pas marcher pourquoi ?

    6
    Mercredi 19 Novembre 2014 à 13:07
    Bonjour Miss Louna,
    Tu veux le faire pour quel module ?
    7
    Mercredi 19 Novembre 2014 à 13:10
    Je voudrais le faire pour le module "présentation" dans le blog "The World of Miss Louna"
    8
    Mercredi 19 Novembre 2014 à 14:04

    Bon, je viens de taper un comm ici et puis juste avant de l'envoyer, disparu!!!!

    En gros, je te disais que ton module présentation est un module simple donc pas comme un module derniers articles ou modules de liens qui comportent des ul, eux.

    Le tien, mais ce n'est pas anormal a des p ( pour paragraphe) et donc faut adapter le code donné dans l'article en conséquence..

    J'ai rapide essayé mais lorsque je cache ton module présentation, on le voit quand mm à travers lee module shootbox qui a un fond translucide..

    Bon, je regarderai cela plus en détail ce soir...

    9
    Mercredi 19 Novembre 2014 à 14:17
    A don ça n'a pas marcher ? Dommage...Ok pour ce soire merci !
    10
    Mercredi 19 Novembre 2014 à 17:34

    Essaie le deuxième code que j'ai mis dans l'article en changeant le numéro.

    Je l'ai essayé sur ton blog, en mettant 220 à la place du 28 du premier height ( pour que fermé, on voit l'image en entier) et 440 à la place du 200 du 2ème height ( je crois de mémoire , pour qu'il se déploie en entier sans faire apparaitre la barre de défilement grise)

    Il faudra aussi je pense que tu supprimes le CSS que tu as déjà ajouté pour ce module sinon, le nouveau CSS risque de ne pas fonctionner...

    11
    Jeudi 20 Novembre 2014 à 07:14
    Super ça a marcher! Il suffisais juste d'enlever l'ancien code css...J'ai mie 150 je trouve que ça va bien comme ça.

    Merci beaucoup ton blog est une vrai min d'or!
    12
    Mercredi 10 Février 2016 à 16:31

    Mille merci! Ça marche même sur mon menu déroulant du module de liens de mes amis.

    Michel

    13
    Dimanche 31 Juillet 2016 à 21:14

    Bonjour, es que tu peux m'aider s'il te plait j'ai essayée mais je n'y arrive pas TT.TT



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl