Menu déroulant

Menu déroulant - HTML/CSS - Programmation

Marsh Posté le 30-08-2005 à 13:34:18    

Bonjour à tous,
 
J'aurais besoin de votre aide pour un petit menu déroulant (je précise tout de suite que je n'y connais pas grand chose en html, donc n'hésitez pas à faire des commentaires, précis si possible).
 
Voilà ce que j'aimerais pouvoir faire :
Pour chaque menu, il y a une image (image 1), quand on passe sur
cette image, elle se transforme en une image 2 comportant un lien.
 
En même temps, deux sous-menus apparaissent, chacun composés d'une
image(3) et d'une image 4 comportant un lien. Quand on passe sur image
4, image 3 change.
 
Pendant tout le temps qu'on est sur un menu (menu plus sous-menu),
image 2 doit être active. Dès qu'on part du menu, la page doit revenir
à son état standard, c'est à dire que les sous-menus ne doivent plus
être à l'écran et que l'image 1 doit être restituée.
 
J'arrive à obtenir ce que je veux (de manière un peu batarde et en très mauvais code je suppose) quand tous les sous-menus sont déroulés. Par contre, je n'arrive pas à les rendre dynamique.
 
Si vous pouviez me dire quelle technique utiliser, ça m'aiderait. Je suppose qu'il y a 50 choix possibles, mais tout ce que j'essaie échoue. Si vous avez des exemples de code me permettant de faire ça, je suis preneur. Je ne demande qu'à chercher, mais dans la bonne direction !!
 
Par ailleurs, vaut-il mettre un menu vertical dans une frame à gauche de l'écran ou dans une colonne de tableau, ou ailleurs ??
 
Merci.
 
Je vous joins le code actuel. Il manque les liens et j'ai mis des images au pif. Ce n'est pas très clair, mais peut-être que ça peut vous donner une idée de mon niveau.
 
A + Aaclof
 
 
<div onmouseOver="Menu2.src='./chien.gif'" onmouseOut="Menu2.src='./chien.jpg'">
 
<table><TR><TD align = center bgcolor = yellow width=120 onmouseOver="Menu2.src='./chien.gif'" onmouseOut="Menu2.src='./chien.jpg'"><IMG NAME="Menu2" SRC="./chien.jpg"></td><TD align= right width =40></td><td></td></TR></table>
<table>
<TR><TD width =20></td><TD align = left width=30><IMG SRC="./blanc.jpg" NAME="SSMenu3" ></td><TD width =100><IMG SRC="./image1.jpg" onmouseOver="SSMenu3.src='./patte.gif'" onmouseOut="SSMenu3.src='./blanc.jpg'"></td></TR>
<TR><TD width =20></td><TD align = left width=30><IMG SRC="./blanc.jpg" NAME="SSMenu4" ></td><TD width =100><IMG SRC="./image2.jpg" onmouseOver="SSMenu4.src='./patte.gif'" onmouseOut="SSMenu4.src='./blanc.jpg'"></td></TR>
</table>
</div>

Reply

Marsh Posté le 30-08-2005 à 13:34:18   

Reply

Marsh Posté le 30-08-2005 à 13:49:25    

Aaclof a écrit :

Pour chaque menu, il y a une image (image 1), quand on passe sur
cette image, elle se transforme en une image 2 comportant un lien.


Liste de liens, styler les liens avec l'image 1 en background, l'image 2 quand le lien est dans l'état :hover, fini

Citation :

En même temps, deux sous-menus apparaissent


Tu veux parler d'un sous menu avec deux éléments plutôt là, non? [:ciler]

Citation :

image(3) et d'une image 4 comportant un lien. Quand on passe sur image
4, image 3 change.


[:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-08-2005 à 14:33:02    

Effectivement ce n'est peut-être pas très clair.
 
Quand je passe sur l'image de mon menu, j'aimerais effectivement qu'un seul sous-menu apparaisse, celui-ci comportant deux éléments .
 
Chacun de ces élements est une image avec un lien. Quand on passe sur cette image, cela a pour effet de modifier une autre image du document.
 
Je sais que ça paraît complexe, pourtant en y allant lentement, c'est assez simple.
 

Reply

Marsh Posté le 30-08-2005 à 14:37:25    

Aaclof a écrit :

Effectivement ce n'est peut-être pas très clair.
 
Quand je passe sur l'image de mon menu, j'aimerais effectivement qu'un seul sous-menu apparaisse, celui-ci comportant deux éléments .


C'est donc bien ça :jap:  

Citation :

Chacun de ces élements est une image avec un lien. Quand on passe sur cette image, cela a pour effet de modifier une autre image du document.


Raison de cette modification distante?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-08-2005 à 15:21:06    

En fait ce n'est pas une modification distante... j'essayais juste d'éclaircir.
 
Je vais retenter : Toujours dans mes sous-menus, je veux que quand on passe sur une image, un signe apparaisse devant (un rond par exemple).
C'est juste un effet visuel. J'aurais pu dire que quand on passe sur le lien, il change de couleur... Moi je veux que quand on passe sur le lien, une petit signe distinctif apparaisse...
 
Je n'ai rien trouvé de mieux à faire que de définir une image, blanche au départ, que je dois modifier lorsque cela est utile...
 
Ceci étant dit, est-ce que tu vois comment faire ce que je cherche à faire ?

Reply

Marsh Posté le 30-08-2005 à 15:38:59    

Aaclof a écrit :

Ceci étant dit, est-ce que tu vois comment faire ce que je cherche à faire ?


Oui, suffit de faire des listes imbriquées et de mettre les effets sur le hover des liens.
 
Le code HTML donne grosso merdo

<ul id="menu"
    <li><a href="#">LienVersSousMenu1</a>
        <ul>
            <li><a href="#">ElementDeSousMenu1N1</a></li>
            <li><a href="#">ElementDeSousMenu1N2</a></li>
        </ul>
    </li>
    <li><a href="#">LienVersSousMenu2</a>
        <ul>
            <li><a href="#">ElementDeSousMenu2N1</a></li>
            <li><a href="#">ElementDeSousMenu2N2</a></li>
        </ul>
    </li>
    <li><a href="#">LienVersSousMenu3</a>
        <ul>
            <li><a href="#">ElementDeSousMenu3N1</a></li>
            <li><a href="#">ElementDeSousMenu3N2</a></li>
        </ul>
    </li>
</ul>


Et un peu de CSS/JS pour le dynamisme [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-08-2005 à 15:54:18    

Pourrais-tu me donner un exemple du code JS utilisé pour faire apparaître et disparaître les sous-menus ? (utilisation du hover des liens ?)
 
Merci de ton aide en tous cas !!

Reply

Marsh Posté le 30-08-2005 à 15:58:17    

http://www.htmldog.com/articles/suckerfish/dropdowns/


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed