Bonjour, je débute dans la creation d'un site internet. J'essaye de réaliser un menu déroulant horizontal avec des boutons créés sur photoshop pour personnaliser le menu. Ce qui donne pour le code :
Le code HTML fonctionne parfaitement, j'arrive bien à obtenir le changement de couleur au passage de la souris. Le code CSS je pense qu'il est correct.
Pour que le menu soit déroulant j'ai vu qu'il fallait rajouter un code Javascript et c'est à ce niveau où je ne comprend pas du tout et je sais pas comment faire pour obtenir ce résultat : http://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html
Du coup je reformule ma demande qui sera beaucoup plus précise. Quel est le code javascript que je dois appliquer pour obtenir le résultat souhaité ?
Merci
Modifié par Fanyyy974 (24 Nov 2010 - 09:26)
<ul id="menu">
<td><a href=""><img src="Menu1_1.gif"onMouseOver="this.src='Menu1_2.gif'" onMouseOut="this.src='Menu1_1.gif"></a></td>
<td><a href=""><img src="Menu2_1.gif"onMouseOver="this.src='Menu2_2.gif'" onMouseOut="this.src='Menu2_1.gif'"></a>
<ul>
<td><a href="#"><img src="SousMenu1_1.gif"onMouseOver="this.src='SousMenu1_2.gif'"onMouseOut="this.src='SousMenu1_1.gif'"></a></td>
<td><a href="#"><img src="SousMenu2_1.gif"onMouseOver="this.src='SousMenu2_2.gif'"onMouseOut="this.src='SousMenu2_1.gif'"></a></td>
</ul>
</td>
<td><a href=""><img src="Menu3_1.gif"onMouseOver="this.src='Menu3_2.gif'" onMouseOut="this.src='Menu3_1.gif'"></a>
<ul>
<td><a href="#"><img src="SousMenu1_1.gif"onMouseOver="this.src='SousMenu1_2.gif'"onMouseOut="this.src='SousMenu1_1.gif'"></a></td>
<td><a href="#"><img src="SousMenu2_1.gif"onMouseOver="this.src='SousMenu2_2.gif'"onMouseOut="this.src='SousMenu2_1.gif'"></a></td>
</ul>
</td>
<ul>
<td><a href=""><img src="Menu4_1.gif"onMouseOver="this.src='Menu4_2.gif'"onMouseOut="this.src='Menu4_1.gif'"></a></td>
<td><a href=""><img src="Menu5_1.gif"onMouseOver="this.src='Menu5_2.gif'"onMouseOut="this.src='Menu5_1.gif'"></a>
</ul>
</td>
</ul>
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu td {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu td a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu td a:hover {
color:#FFD700;
}
Le code HTML fonctionne parfaitement, j'arrive bien à obtenir le changement de couleur au passage de la souris. Le code CSS je pense qu'il est correct.
Pour que le menu soit déroulant j'ai vu qu'il fallait rajouter un code Javascript et c'est à ce niveau où je ne comprend pas du tout et je sais pas comment faire pour obtenir ce résultat : http://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html
Du coup je reformule ma demande qui sera beaucoup plus précise. Quel est le code javascript que je dois appliquer pour obtenir le résultat souhaité ?
Merci
Modifié par Fanyyy974 (24 Nov 2010 - 09:26)