vendredi 15 juin 2012

Tuto Webdesign : Menu déroulant vers le haut (Calques et HTML)

Sur la toile on trouve énormément de tutoriaux pour réaliser des menus déroulants vers le bas en css, js, jquery, etc (ex ou ex).
Ça se corse quand il s'agit de pécho des exemples de menus déroulants vers le haut, limite c'est tellement secret qu'il va falloir se débrouiller tout seul et réfléchir comme un grand geek trentenaire.
Du coup tout seul j'ai réfléchi comme un grand geek trentenaire et comme je suis sympa je vous donne la solution miracle.

Outils : Notepad++, Photoshop ou Photoshop-like
Connaissances requises : html et positionnement div

La plupart des tutos que j'ai trouvé sur le net mettent en place des menus avec du texte, ici nous bosserons avec des images (avec des images on peut faire ce qu'on veut des textes (ombrages, styles, etc.))

Première étape :
On veut afficher une image secondaire au survol d'une image principale. (Quand on survole l'image 1 dans le calque 1 ça affiche l'image 2 dans le calque 2.) On utilisera la fonction "getElementById".

<div id="image1">
<a ahref="#"
onmouseover="document.getElementById('image2').style.visibility='visible';"
onmouseout="document.getElementById('image2').style.visibility='hidden';">
<img src="image1.jpg">
</a>
</div>

2ème étape :
On cache le calque qui contient l'image 2 et on veut qu'au survol de ce calque il reste affiché. On utilisera la fonction  "this.style.visibility".

<div id="image2" onmouseout="this.style.visibility='hidden';" onmouseover="this.style.visibility='visible';" style="position:absolute; visibility:hidden;">
<img src="image2.jpg">
</div>

A savoir qu'il faudra positionner les calques au pixel prêt (au dessus de l'image)

Un exemple de ce style de menu déroulant (la structure utilisée provient d'un autre site). En analysant la source vous devriez retrouver les étapes ci-dessus.

Pour toute question ça se passe dans les comms just'en dessous.

0 commentaires:

Enregistrer un commentaire