Créer un volet coulissant en CSS3 avec :target et transition

Bonjour tout le monde,

J'ai voulu adapter ce tutoriel (http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html) pour faire un volet caché sous un DIV qui ne se révèle pas de la gauche vers la droite mais de bas en haut.

J'ai donc positionné mes différents éléments et appliqués des z-index pour que le div #volet soit caché sous le div #main.

Jusqu'ici tout va bien

Ensuite j'ai adapté la méthode présentée dans le tutoriel pour que le paramètre modifié en état :target ne soient pas "left" mais "top" et que mon volet monte au clic pour laisser apparaitre le contenu caché sous le div #main

Tout roule sauf une chose

Quand je clique sur le lien qui fait monter le volet l'écran scrolle vers le bas et affiche le centre de la page, autant dire que ce n'est pas l'effet escompté

J'ai cru être face au petit désagrément de "saut" indiqué dans le tuto et j'ai essayé d'appliquer une position fixed sur le parent mais ça ne change rien, pire l'élément étant fixé il apparait un peu n'importe où en hauteur quand on scrolle la page pour en lire le contenu.

Dites-moi que vous avez une idée à mon pb

Bouh personne ?

La première chose serait de désactiver l'effet par défaut de ton ancre.

Alors, sur ton lien:

<a href="#target" onclick="return false;">

Merci pour la réponse mais entre temps je suis passé sur du jQuery

Je testerai quand même par curiosité.

Vaxilart a écrit :
La première chose serait de désactiver l'effet par défaut de ton ancre.

Alors, sur ton lien:

<a href="#target" onclick="return false;">