Comment faire des menus déroulants cliquables ?

28 janvier 2006 à 20:29:11

Bonjour,

Je voudrais savoir quel code je dois insérer pour avoir en dessus du corps de ma page mes menus, se seraient des listes déroulantes comme sur
http://www.sports.fr

En dessus de la page je voudrais avoir mon menu et que le visiteur puisse cliquer sur la page de son choix ?
On m'a dit que c'était du java ? est-ce vrai ?

Merci beaucoup d'avance

b.moyet

28 janvier 2006 à 20:35:11

hop la

http://www.siteduzero.com/forum-83-16343-js-menu-qui-se-deroule.html

et c'est du javascript (vivement que ca prenne l'appellation ecmascript dans les moeurs qu'on ne confonde plus

toony442

28 janvier 2006 à 20:37:07

Ton lien est censé me servir a quoi ? lol
Moi je voudrais savoir si quelqu'un peut me donner un exemple de code ?
Merci

b.moyet

28 janvier 2006 à 20:44:17

Ben ta question est a quelques choses prêt la même que l'autre post... Quant à donner un exemple de code ben ca ne se fait pas en 5 minutes ce genre de chose. Comme dit dans l'autre poste il faut:

-programmer une fonction qui crée les sous menus sur ta page(le plus dur)
-crée la fonction qui les insère et qui gère les cas ou la souris sors du menu, où elle revient avant que ca ne soit fermé...

Ou alors tu peux récupérer un script tout fait

Xypno

28 janvier 2006 à 21:07:05

Tien voila moi j'ai le code en html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0 ; padding:0} /* marges intérieures et extérieures de la page à 0 */

.menu-general { /* défini les boites qui comprenent chaque menu de base */
float:left ; /* Les boite sont calées à gauche */
width:19% ; /* largeur des boites du menu de base */
padding:0 ; /* marges intérieures à 0 */
margin: 0 ; /* marges extérieures à 0 */
height:20px} /* Hauteur des boites */

#sous-menu1, #sous-menu2, #sous-menu3 { /*défini les 3 boites des 3 sous-menues */
display: none; /* les sous-menus ne sont pas affichés */
margin: 0; /* marges extérieures à 0 */
padding : 0; /* marges intérieures à 0 */
position : absolute ; /* boite positionnée par rapport à la boite parent, ici l'écran */
top : 19px; /* Début (par rapport au haut de page) des sous-menus */
left : 0px; /* Début (par rapport à la gauche de la page) des sous-menus */
width : 19%} /* largeur des sous-menus par rapport à la boite parent (ici la page)*/

#sous-menu2 {left:20%} /* Distance à la gauche de la page du 2ième sous-menu */

#sous-menu3 {left:39%} /* Distance à la gauche de la page du 3ième sous-menu */
</style>
<script type="text/javascript" src="menu.js"></script> 
</head>

<body>

<div class="menu-general" onmouseover="montre('sous-menu1');" onmouseout="cache('sous-menu1');">Menu 1</div> 
<ul id="sous-menu1" onmouseover="montre('sous-menu1');" onmouseout="cache('sous-menu1');"> 
<li><a href="#">Sous-menu1 1</a></li> 
<li><a href="#">Sous-menu1 2</a></li> 
<li><a href="#">Sous-menu1 3</a></li> 
</ul>

<div class="menu-general" onmouseover="montre('sous-menu2');" onmouseout="cache('sous-menu2');">Menu 2 </div>
<ul id="sous-menu2" onmouseover="montre('sous-menu2');" onmouseout="cache('sous-menu2');">
<li><a href="#">Sous-menu2 1</a></li>
<li><a href="#">Sous-menu2 2</a></li>
<li><a href="#">Sous-menu2 3</a></li>
</ul>

<div class="menu-general" onmouseover="montre('sous-menu3');" onmouseout="cache('sous-menu3');">Menu 3</div> 
<ul id="sous-menu3" onmouseover="montre('sous-menu3');" onmouseout="cache('sous-menu3');">
<li><a href="#">Sous-menu3 1</a></li>
<li><a href="#">Sous-menu3 2</a></li>
<li><a href="#">Sous-menu3 3</a></li>
</ul>

</body>
</html>

wydook66

28 janvier 2006 à 22:58:47

bonsoir.

Et le fichier menu.js on peu tle voir aussi ?

Merci