• Derniers visiteurs caché qui coulisse survol souris ಠ⌣ಠ

    Par Maximum 34 dans Réduire hauteur colonne menu latéral le 15 Janvier 2015 à 17:39

    ಠ⌣ಠ

    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:

     

    « Un joli module de marques-pagesBoutons de menu qui tournent »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :

  • Commentaires

    Aucun commentaire pour le moment



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl