Volet latéral déroulant

Bonjour,

Je cherche une source ou éventuellement de l'aide afin de faire un truc tout simple (pour ceux qui connaissent javascript).

Je souhaite en effet créer un volet latéral qui va se dérouler en superposition dès qu'on clique sur un bouton. Ce volet pourra contenir ce qu'on veut mais plus précisément dans le cas présent un formulaire de contact.

Je vois le script de la manière suivante :

1 DIV conteneur avec : overflow hidden, positionné
1 DIV qui contient mon fond (anim flash en l'occurence) avec : z-index 1, positionné
1 DIV qui constituera mon volet déroulant avec : z-index 2, positionné

1 fonction javascript qui permet de dérouler mon DIV en z-index 2 en modifiant sa position avec une animation.

1 bouton avec un évènement ( type on click par exemple ) qui déclenchera ma fonction.

Le souci c'est que je ne sais pas faire ça, je n'y connais rien en javascript a mon grand désespoir.

PS : Le top serait d'envisager aussi la possibilité d'un navigateur ayant javascript de désactivé avec un lien "normal" sur le même bouton qui enverrai vers une autre page avec mon formulaire de contact.


Donc si quelqu'un se sent une âme charitable en me donnant un coup de main ou une piste.

Cdt
Modifié par Klesk (15 Nov 2010 - 10:54)

Personne n'aurait ne serait-ce qu'une piste ou une source simple à comprendre pour ce petit volet?

Bonjour,

En connaissant un peu JavaScript, ce serait tout de suite plus simple, effectivement. Surtout que l'optique de ce forum n'est pas de donner des codes prêts à l'emploi.

Pour faire relativement simple, une librairie JavaScript telle que jQuery peut faciliter la création de ce genre d'effets. (Charger toute la lib jQuery est sans doute excessif pour un effet aussi limité, mais les libs plus modulaires telles que YUI sont un peu plus difficiles d'accès.)
En jQuery donc on pourra utiliser la méthode click pour associer une fonction au clic sur un bouton ou lien (terminer la fonction avec un return false permettra de rendre l'action normale du lien inopérante), et la méthode animate pour le déplacement progressif de l'élément.

Lire un ou deux tutoriels d'introduction à JavaScript, puis les tutoriels d'introduction à jQuery, est fortement recommandé.
Ou bien confier le boulot à quelqu'un qui maitrise déjà ça.

Merci Florent pour cette réponse. Je connais déjà un peu Jquery pour l'utiliser sur spip notamment et je me doutais bien qu'on pouvait faire ça avec.

Mais en fait je pensais, peut être de façon innocente, qu'une fonction pour faire "juste" ça serait bien plus légère et il me semblait (toujours avec mon innocence de néophite javascript) qu'en quelques lignes de code cela serait baché.

Je vais me pencher sur jquery. J'ai déjà une source qui devrait pouvoir me servir en l'adaptant.