Menu déroulant html
Bonjour,
voilà, je me suis lancé dans un site web en html et je voudrais savoir si il était possible de rajouter un menu déroulant à partir d'un tableau disposé comme celui-ci :
<TABLE center bgcolor="#0000FF" width="70%">
<TH>
<TH WIDTH="20%"><P><a href="#">Menu1</a></TH>
<TH WIDTH="30%"><P><a href="#">Menu2</a></TH>
<TH WIDTH="20%"><P><a href="#">Menu3</a></TH>
</TR>
</TABLE /center>
Ma question, pour être plus explicite est de savoir si il est possible d'ajouter des sous menu à chaque menu ... ?
Merci d'avance pour toutes vos suggestions !
voilà, je me suis lancé dans un site web en html et je voudrais savoir si il était possible de rajouter un menu déroulant à partir d'un tableau disposé comme celui-ci :
<TABLE center bgcolor="#0000FF" width="70%">
<TH>
<TH WIDTH="20%"><P><a href="#">Menu1</a></TH>
<TH WIDTH="30%"><P><a href="#">Menu2</a></TH>
<TH WIDTH="20%"><P><a href="#">Menu3</a></TH>
</TR>
</TABLE /center>
Ma question, pour être plus explicite est de savoir si il est possible d'ajouter des sous menu à chaque menu ... ?
Merci d'avance pour toutes vos suggestions !
6 réponses
-
Salut,
Je vais t'expliquer, mais pourquoi tu l'as mis dans un tableau ???
-
Car tous les menus déroulants que j'ai trouvé sur internet, que ce soit en html css ou javascript n'ont donné aucun bon résultat ... :/
-
Tu veux un menu comment ?
Comme ça par exemple ? (le menu "pratique") http://kungfu-trunghoa.redheberg.com/
Ou beaucoup plus basique ?
-
Comme le menu "pratique" ça serait parfait, et si tu peux me montrer pour le comme pour le sous menu "massages" ça serait nikel ;) (y)
-
Pas de souci, en fait tu as 2 images pour chaque bouton, et on change d'image lors du survol de la souris, ce qui fait l'effet enfoncé.
Et lors du survol, on affiche éventuellement un sous menu (pour le principe).
Ca se joue avec ces mots-clés: onmouseover, onmouseout, quelquechose.visible=true ou quelquechose.visible= false.
Ca, c'est pour le principe.
Voilà un exemple de code, pour le menu en question:
<a href="index.php"><img src="images/menur1.gif" class="menu1" onmouseover="this.src='images/menur2.gif';" onmouseout="this.src='images/menur1.gif';"/></a> <a href="assoce.php"><img src="images/menur11.gif" class="menu2" onmouseover="this.src='images/menur12.gif';" onmouseout="this.src='images/menur11.gif';"/></a> <div class="menu3"> <a href="pratique.php"><img src="images/menur41.gif" class="menu31" onmouseover="this.src='images/menur42.gif';" onmouseout="this.src='images/menur41.gif';"/></a> <a href="kungfuwushu.pratique.php"><img src="images/ls1.gif" onmouseover="this.src='images/ls12.gif';" onmouseout="this.src='images/ls1.gif';"class="ls1"/></a> <a href="taichichuan.pratique.php"><img src="images/ls2.gif" onmouseover="this.src='images/ls22.gif';" onmouseout="this.src='images/ls2.gif';" class="ls2"/></a> <a href="qigong.pratique.php"><img src="images/ls3.gif" onmouseover="this.src='images/ls32.gif';" onmouseout="this.src='images/ls3.gif';" class="ls3"/></a> <a href="selfdefense.pratique.php"><img src="images/ls4.gif" onmouseover="this.src='images/ls42.gif';" onmouseout="this.src='images/ls4.gif';" class="ls4"/></a> <div class="sousmenu3"> <a href="massages.pratique.php"><img src="images/ls5.gif" onmouseover="this.src='images/ls52.gif';" onmouseout="this.src='images/ls5.gif';" class="ls5"/></a> <a href="californien.pratique.php"><img src="images/ls61.gif" onmouseover="this.src='images/ls62.gif';" onmouseout="this.src='images/ls61.gif';" class="ls61"></a> <a href="integral.pratique.php"><img src="images/ls71.gif" onmouseover="this.src='images/ls72.gif';" onmouseout="this.src='images/ls71.gif';" class="ls71"></a> <a href="ventouses.pratique.php"><img src="images/ls81.gif" onmouseover="this.src='images/ls82.gif';" onmouseout="this.src='images/ls81.gif';" class="ls81"></a> </div> </div> <a href="contact.php"><img src="images/menur21.gif" class="menu4" onmouseover="this.src='images/menur22.gif';" onmouseout="this.src='images/menur21.gif';"/></a> <a href="galerie.php"><img src="images/menu31.gif" class="menu5" onmouseover="this.src='images/menu32.gif';" onmouseout="this.src='images/menu31.gif';"/></a> <img src="images/cadre.gif" class="cadre"/> <img src="images/integral1.gif" class="imgcadre" onmouseover="this.src='images/integral2.gif';" onmouseout="this.src='images/integral1.gif';"/>
Copie colle dans notepad ++, tu y verras plus clair, et dit moi si tu veux plus d'explications.
-
Ah je voudrais bien si tu as les images de tes sources, elles m'ont l'air pas mal, ça m'interesserais de les mettre sur mon site web, à moins que tu peux me dire où je peux trouver ça :o
car si je copie et que je colle sur notepad++ je ne vois rien étant donné que je n'ai pas les sources de tes images :/
