•  

     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*/
      }

    Partager via Gmail Yahoo! Google Bookmarks

    13 commentaires
  • ಠ⌣ಠ

    Tout d'abord, il vous faut récupérer le numéro de votre module "derniers visiteurs"
    Voir dans cet article 
    http://bleulezard.eklablog.com/examiner-un-element-et-trouver-son-selecteur-a80512900
    comment récupérer le sélecteur.

     

    Une fois le numéro du module récupéré, il faut ajouter du CSS pour donner au module  sa position précise  lorsqu'il est caché ( en ne laissant dépasser qu'un petit bout)  et sa position  lorsque le petit bout qui dépasse  est survolé par la souris. On peut également modifier les dimensions d'origine du module dans le menu latéral.

     

    Ci-dessous, le CSS à ajouter pour un effet comme sur ce blog, en haut à gauche ==> c'est à dire un module derniers visiteurs vertical, plus haut que large et qui coulisse de haut en bas  ( les images des avatars ont été réduites  à 28px).

    Si vous voulez un module qui coulisse de gauche à droite, il faudra adapter le code ci-dessous en lui donnant une dimension plutôt horizontale et en précisant la distance, non pas depuis le haut (top) mais depuis la gauche ( left) . Dans ce cas, seule la valeur de   left  change  dans le code en survol (hover).

    On peut également ne pas vouloir changer les dimensions de son module "derniers visiteurs" --sa largeur est celle du menu vertical auquel il appartient à l'origine et sa longueur est fonction du nombre et de la grandeur des images avatars qui s'y trouvent-- Dans ce cas là, pas de ligne height et width dans le CSS à ajouter.
    Il suffit d'indiquer la position cachée et la position au survol du module.


    Si le déplacement est vertical comme sur ce blog, il faut regarder la hauteur (height) du module afin de  déterminer la valeur du retrait en position cachée qui sera le nombre à mettre à
    top: -YYYpx;.
    Si le déplacement est horizontal, il faut regarder la largeur (width) du module afin de déterminer la valeur du retrait en position cachée à mettre à
    left:-YYYpx;
    Tout en sachant qu'il faut laisser un petit bout dépasser...

     

    /*MODULE DERNIERS VISITEURS NON SURVOLE*/
    #module_menuXXXXXXXXX .module_menu_contenu_block {
    position: fixed;
         height: 308px;/* hauteur du module*/
         width:54px; /*largeur du module*/
         top:-214px; /*distance du bord haut/positionnement vertical/negatif car n'est pas sur la page*/
         left: 1%;  /*positionnement horizontal*/ 
    transition-property: all;/* pour declarer les trasitions*/
        -webkit-transition: all 0.5s linear;     
        -moz-transition: all 0.5s linear;     
        -o-transition: all 0.5s linear;     
        -ms-transition: all 0.5s linear;     
        transition: all 0.5s linear;}

    /*MODULE DERNIERS VISITEURS au SURVOL*/
    #module_menuXXXXXXXXX .module_menu_contenu_block:hover{
        top: 26px;/* position module déployé*/}

    Si vous voulez modifier les dimensions de votre module derniers visiteurs, vous pouvez également modifier les dim des images avartars.
    Le sélecteur en question est:

    .module_menu_type_lastvisitors img

    Reportez-vous à l'article http://bleulezard.eklablog.com/reduire-module-derniers-visiteurs-a80250068

    On peut également appliquer un effet aux images avatars au survol de la souris. Le sélecteur en question est 

    .module_menu_type_lastvisitors img:hover

    Plusieurs articles sur les effets CSS appliqués aux images:

     

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
//script feuille de style suppl