Discussion :

[Banks]

Bonjour à tous,

Je suis en train de travailler sur un site internet et j'aimerai faire un menu en cascade déroulant sur passage de la souris. Mes recherches m'ammènent à penser que la solution la plus courante pour ce genre de chose est l'utilisation de javascript couplé à une feuille de style css. Le souci est que je ne connais pas grand chose en javascript. Je cherche donc un moyen de réaliser ce que je veux assez rapidement sans avoir une connaissance approfondie dans ce langage. Voici un exemple sur ce site de ce que je veux réaliser http://www.cite-musique.fr/francais/accueil.html
Vous verrez quand on passe la souris sur le menu en haut (concert, musée, ...) une liste déroulante apparait. Voilà voilà, tutoriaux et autres guides sont les bienvenus. Merci d'avance pour votre aide. Dite moi s'il vous faut plus de détail.

[sharrascript]

bonjour,

Je te laisse un code assez simple que j'avais trouvé j'ne sais plus où, mais plutôt sympa.

Je te l'expliquerais si le besoin s'en fait sentir. Dis moi si c'est ce que tu cherchais.

dans ton head

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

la div à placer sur ta page, dans le body

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
<div id="menu">
		<dl>
		<dt onmouseover="javascript:montre('smenu1');"><a href='gestion.php'><font color="#D40000">INDEX</font></a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');"  onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
				</ul>
			</dd>
			</dl>
			<dl>
		<dt onmouseover="javascript:montre('smenu2');"><a href='gestion.php'><font color="#D40000">INDEX 2</font></a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');"  onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
					<li><a href="#">Sous-Menu 2.5</a></li>
				</ul>
			</dd>
		</dl>
	</div>

le css

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
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
#menu {
	position: absolute; /* placement du menu, à modifier selon vos besoins */
	top: 0;
	left: 0;
	z-index:100;
	width: 100%; /* correction pour Opera */
}
 
#menu dl {
	float: left;
	width: 12em;
}
 
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border: 1px solid gray;
	margin: 1px;
}
#menu dd {
	display: none;
	border: 1px solid gray;
}
#menu li {
	text-align: center;
	background: #fff;
}
#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #eee;
}

Bien sur il faudra lui créer un css approprié.
Je suis désolé, de te laisser un code à l'arrache sans l'expliquer et de plus qui n'est pas de moi, mais si cela peut t'aider le temps, que je t'écrive quelque chose de correct

++

[Banks]

Merci bien je vais déjà essayé de voir ce que je peux faire avec ca. Je ferais signe demain quand je retournerai au travail pour dire si ca marche comme je veux ou si j'ai une galère.

[Banks]

C'est bon ça marche comme je veux. Je l'ai adapté à mon code et c'est bon.

Voilà voilà merci encore de ton aide!