Menu hor. déroulant et s/s menu hor.

**jlb59** · 14/11/2010, 11h01

Bonjour à tous,

J'ai un menu hor. sur mon site qui marche impec !

Comme j'ai dû rajouter plusieurs pages dont certaines contiennent d'autres pages, je voudrais changer l'aspect du menu hor déroulant.

Comme maintenant, j'ai plus de liens à mettre, le mieux serait d'avoir un menu hor déroulant qui afficherait un sous-menu hor.

Je ne sais pas si vous comprenez bien !!!

Par exemple comme ceci :
Menu1 Menu2 Menu3
Sous-menu1 Sous-menu2 Sous-menu3

Comment faire d'abord le menu, car je suppose qu'il faut du JS, et ensuite, je voudrais qu'il soit habillé et c'est là aussi que j'ai le prb ! Mais là, ça doit être avec du Css non ?

Merci d'avance de votre aide.

**SpaceFrog** · 14/11/2010, 11h27

menu hor ?

ça mange quoi ces bêtes là ?

**jlb59** · 14/11/2010, 13h00

menu hor = menu horizontal

**SpaceFrog** · 14/11/2010, 13h07

desolé je ne comprends pas le sms ...
ça va mieux en l'ecrivant en toutes lettres.

Ensuite sans voir ton code c'est un peut difficile de se prononcer.
je dirais qu'avec un peu de css display inline ou float left sur les elements du sous menu tu devrais arriver à tes fins

**jlb59** · 14/11/2010, 13h41

Html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<title>Menu horizontal</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />
	<script type="text/javascript" src="functions.js"></script>
<!--	<link rel="stylesheet" href="styles.css" type="text/css" />-->
<style>
BODY{background:#2b004b;font-family:verdana;font-size:12px;}
.item{
  display: none;
}
.lienItem{
 text-decoration: none;
 color: #ffffff;
}
.lienItem:hover, .styleOverMenu{
 background-color: #FF6600;
 color: #000000;
}
.styleOutMenu{
 background-color: #CC0033;
 color: #ffffff;
}
</style>
 
</head>
<body>
<div id="menu" onmouseout="mouseOut()">
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu1')">&nbsp;Menu1&nbsp;</span>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu2')">&nbsp;Menu2&nbsp;</span>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu3')">&nbsp;Menu3&nbsp;</span>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu4')">&nbsp;Menu4&nbsp;</span>
</div>
 
<!-- ce div doit posseder au moins le caractère &nbsp; -->
<!-- on peut y ajouter un message qui sera masque lors du passage de la souris sur le menu -->
<div id="itemVide">
&nbsp;
</div>
 
<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu1" class="item">
<a href="#" class="lienItem">sous menu 11</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 12</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 13</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 14</a>
</div>
 
<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu2" class="item">
<a href="#" class="lienItem">sous menu 21</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 22</a>
</div>
 
<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu3" class="item">
<a href="#" class="lienItem">sous menu 31</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 32</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 33</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 34</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 35</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 36</a>
</div>
 
<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu4" class="item">
<a href="#" class="lienItem">sous menu 41</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 42</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
<a href="#" class="lienItem">sous menu 43</a>
</div>
 
<hr /> 
</body>
</html>

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var oldItem = null;
var oldMenu = null;
var timer = null;
 
/* Fonction appelee lors du mouseover sur le menu */
function mouseOverMenu(menu, idItem)
{
 /* on arrete le timer declenche lors d un onmouseout */
 if (timer!=null)
 {
    clearTimeout(timer);
    timer = null;
 }
 
 /* on masque le div vide */
 document.getElementById("itemVide").style.display = "none";
 
 /* si necessaire, on masque le sous-menu precedemmment affiche */
 if (oldItem!=null && oldItem!=idItem)
 {
    document.getElementById(oldItem).style.display = "none";
    oldItem = null;
 }
 
 /* on affiche le sous-menu idItem */
 document.getElementById(idItem).style.display = "block";
 
 /* on redonne le style par defaut de l ancien menu selectionne */
 if (oldMenu!=null && oldMenu!=menu)
 {
    oldMenu.className = "styleOutMenu";
    oldMenu = null;
 }
 
 /* style du menu selectionne */
 menu.className = "styleOverMenu";
 
 
 /* memorisation du choix de l utilisateur */
 oldItem = idItem;
 oldMenu = menu;
}
 
/* Fonction appelée lors du mouseover sur un element du sous-menu */
/* On arrete le chrono */
function mouseOverItem()
{
 if (timer!=null)
 {
    clearTimeout(timer);
    timer = null;
 }
}
 
/* Fonction appelee a la fin du delai indique dans la methode setTimeout */
/* On masque les sous-menu et on redonne aux elements leur parametres par defaut */
function mouseOutT()
{
 if (oldItem!=null)
 {
    document.getElementById(oldItem).style.display = "none";
    oldItem = null;
 }
 
 if (oldMenu!=null)
 {
    oldMenu.className = "styleOutMenu";
    oldMenu = null;
 }
 
 document.getElementById("itemVide").style.display = "block";
 
 timer = null;
}
 
/* declenchement d un timer lors du mouseout sur les elements du menu ou des sous-menus */
/* le timer est arrete si un evenement onmouseover a lieu */
function mouseOut()
{
  if (timer==null)
  {
    timer = setTimeout("mouseOutT()","100");
  }
}

C'est un peu comme je voulais le faire mais je ne sais pas comment habiller les menus et s/s-menus !

Vois un peu ce que ça donne en cliquant ici

**scourjean** · 15/11/2010, 10h28

Ton exemple semble fonctionnel, qu'est-ce qu'il te manque ? A part revoir les couleurs avec le CSS via les propriétés color, background-color et background-image je ne vois pas ce qu'on peut te dire de mieux.

**SpaceFrog** · 15/11/2010, 10h34

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display:inline-block

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float:left

**jlb59** · 15/11/2010, 11h59

Merci à vous 2.

Concernant ce que tu m'as écrit SpaceFrog, c'est super, mais le hic est que je suis un peu perdu dans tout ça.
Tu peux m'expliquer ?

scourjean, oui je sais que c'est fonctionnel, bon les couleurs c'est pas ça ! Mais ce que je voudrais, c'est mettre par exemple un cadre pour la barre du menu et des autres pour les menus et sous-menus. C'est ça que je n'arrive pas à faire !

Si tu as une idées assez explicative, je suis preneur !

**scourjean** · 15/11/2010, 12h12

Pour un cadre sur ton menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#menu{
background-color:#.....;
border: ....;
}

Pour un cadre pour tes sous-menus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.item{
background-color:#.....;
border: ....;
}

Après à toi de spécifier les couleurs et les bordures si tu veux en mettre (pas obligé)

Menu hor. déroulant et s/s menu hor.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager