Bonjour

Bon je suppose être dans la bonne catégorie donc je me lance. Pour mon menu de droite, je cherche à faire des div déroulants, c'est à dire qu'au passage de la souris, ils s'allongent vers le bas et laissent apparaître la suite des informations. Comme sur l'exemple imagé ci-dessous, une fois la souris passées sur le top, celui-ci se déroule sur une taille x. Possible ? Merci

Tu veux dire un menu déroulant, est ça se fait avec des listes généralement pas une div ! tu trouvas des exemples ici .

-
Edité par wxcqsd 31 juillet 2013 à 0:31:22

non c'est pas vraiment un menu, c'est un div avec background image

Ah d'accord ! oui c'est tout à fait possible, voilà un exemple  un peu comme ça...

-
Edité par wxcqsd 31 juillet 2013 à 0:55:27

oui ça ressemble à ça, par contre est ce possible que la transition soir plus lente ? et non instantanée

Salut,

utilise transition. Seul problème, tu ne pourra pas utiliser height:100%.

Il te faudra une valeur absolu.

Mais difficile de savoir combien fera ta div en hauteur, et c'est restrictif.

Donc je te propose de modifier un peu le code de wxcqsd et d'utiliser max-height plutôt que height.

div{
    width: 400px;
    max-height: 100px;
    background: #3D6AA2;
    overflow: hidden;
    -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;
}
div:hover{
    max-height: 1000px;
}

magnifique, merci

Juste pour info, "transition" ne fonctionne pas avec IE9 et inférieur.
C'est quand même assez important...

le site est pas prêt d'être mis en ligne et c'est un petit site perso sans véritable ambition, seule l'élite est acceptée, c'est à dire ceux qui n'utilisent pas IE