-
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
/*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_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*/
}
Tags : réduire hauteur colonnes menu
-
Commentaires
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...
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 cssBonjour 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éeBonjour,
J'ai mie le code dans le css en mettant le code du module mais ça n'a pas marcher pourquoi ?
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...
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...
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!
Ajouter un commentaire
Intéressant cet article, comment insérer ce module sur mes blogs