Menu horizontal sur plusieurs lignes. [Fait]

**Go_Ahead** · 02/05/2007, 10h44

Bonjour à tous,

Je suis débutant en programmation web, je souhaiterais réaliser un menu horizontale qui ressemblerait à celui du site suivant :http://www.thalys.com/be/fr/
Ce que je voudrais savoir, c'est d'une part en quel langage a t'il été effectué, d'autre part y a t'il des tuto existant pour la réalisation ce type de menu ?

Merci à ceux qui auront l'amabilité de me répondre.

Bonne journée.

**Bisûnûrs** · 02/05/2007, 10h46

Il a été fait en Javascript.

**Go_Ahead** · 02/05/2007, 10h52

Merci pour la premiere réponse.
Pour la deuxième question ?

**Auteur** · 03/05/2007, 01h44

Code html :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html>
<head>
<title>Menu</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.item{
  display: none;
}
.lienItem{
 text-decoration: none;
 color: #000000;
}
 
.lienItem:hover{
 background-color: #AADDFF;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var couleurOverMenu = "#AADDFF"; //couleur du fond du titre lors de mouseover
var couleurOutMenu = "";         //couleur du fond du titre lors de mouseout
 
var oldItem = null;
var oldMenu = null;
var timer = null;
 
function mouseOverMenu(menu, idItem)
{
 if (timer!=null)
 {
    clearTimeout(timer);
    timer = null;
 }
 
 document.getElementById("itemVide").style.display = "none";
 
 if (oldItem!=null && oldItem!=idItem)
 {
    document.getElementById(oldItem).style.display = "none";
    oldItem = null;
 }
 
 document.getElementById(idItem).style.display = "block";
 
 if (oldMenu!=null && oldMenu!=menu)
 {
    oldMenu.style.backgroundColor = couleurOutMenu;
    oldMenu = null;
 }
 
 menu.style.backgroundColor = couleurOverMenu;
 
 
 oldItem = idItem;
 oldMenu = menu;
}
 
 
function mouseOverItem()
{
 if (timer!=null)
 {
    clearTimeout(timer);
    timer = null;
 }
}
 
 
function mouseOutT()
{
 if (oldItem!=null)
 {
    document.getElementById(oldItem).style.display = "none";
    oldItem = null;
 }
 
 if (oldMenu!=null)
 {
    oldMenu.style.backgroundColor = couleurOutMenu;
    oldMenu = null;
 }
 
 document.getElementById("itemVide").style.display = "block";
 
 timer = null;
}
 
 
function mouseOut()
{
  if (timer==null)
  {
    timer = setTimeout("mouseOutT()","1000");
  }
}
 
//-->
</script>
 
 
</head>
 
<body>
<div id="menu" onmouseout="mouseOut()">
<span onmouseover="mouseOverMenu(this, 'itemMenu1')">&nbsp;Menu1&nbsp;</span>&nbsp;|&nbsp;
<span onmouseover="mouseOverMenu(this, 'itemMenu2')">&nbsp;Menu2&nbsp;</span>&nbsp;|&nbsp;
<span onmouseover="mouseOverMenu(this, 'itemMenu3')">&nbsp;Menu3&nbsp;</span>&nbsp;|&nbsp;
<span onmouseover="mouseOverMenu(this, 'itemMenu4')">&nbsp;Menu4&nbsp;</span>
</div>
 
<!-- item vide : comme son nom l'indique ce div doit rester vide -->
<div id="itemVide">
&nbsp;
</div>
 
<div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu1" class="item">
<a href="#" class="lienItem">sous menu 11</a>&nbsp;|&nbsp;
<a href="#" class="lienItem">sous menu 12</a>&nbsp;|&nbsp;
<a href="#" class="lienItem">sous menu 13</a>&nbsp;|&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;|&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;|&nbsp;
<a href="#" class="lienItem">sous menu 32</a>&nbsp;|&nbsp;
<a href="#" class="lienItem">sous menu 33</a>&nbsp;|&nbsp;
<a href="#" class="lienItem">sous menu 34</a>&nbsp;|&nbsp;
<a href="#" class="lienItem">sous menu 35</a>&nbsp;|&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;|&nbsp;
<a href="#" class="lienItem">sous menu 42</a>&nbsp;|&nbsp;
<a href="#" class="lienItem">sous menu 43</a>
</div>
 
<hr />
 
 
</body>
 
</html>

Bisûnûrs : encore un exemple à ajouter

Menu horizontal sur plusieurs lignes. [Fait]

HTML

Discussions similaires

Partager

Partager