menu déroulant en css

**itineric** · 04/04/2006, 13h05

Voilà un exemple, le menu est dans le sens horizontal mais je pense que tu sauras l'adapter à ton cas !!!

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
 
<body>
<script type="text/javascript">
	window.onload = function()
	{
		if (document.all&&document.getElementById)
		{
			menuRoot = document.getElementById("Menu");
			for (i=0; i<menuRoot.childNodes.length ; i++)
			{
				node = menuRoot.childNodes[i];
				if (node.nodeName == "LI")
				{
					node.onmouseover=function()
					{
						this.className+=" over";
					}
 
					node.onmouseout=function()
					{
						this.className=this.className.replace(" over", "");
					}
				}
			}
		}
	};
</script>
 
<div class="Menu">
<ul id="Menu">
	<li>
		<a href="">Lien 1</a>
		<ul>
			<li><a href="">Lien 1.1</a></li>
			<li><a href="">Lien 1.2</a></li>
			<li><a href="">Lien 1.3</a></li>
			<li><a href="">Lien 1.4</a></li>
		</ul>
	</li>
	<li>
		<a href="">Lien 2</a>
		<ul>
			<li><a href="">Lien 2</a></li>
			<li><a href="">Lien 2</a></li>
		</ul>
	<li>
		<a href="">Lien 3</a>
		<ul>
			<li><a href="">Lien 3.1</a></li>
			<li><a href="">Lien 3.2</a></li>
			<li><a href="">Lien 3.3</a></li>
		</ul>
	<li><a href="">Lien 4</a></li>
	<li><a href="">Lien 5</a></li>
</ul>
</div>
 
</body>

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
*
{
	margin: 0;
	padding: 0;
}
 
.Menu
{
	border-top: #bac5d9 1px solid;
	border-bottom: #bac5d9 1px solid;
	padding-top: 2px;
	height: 27px;
	background-color: #3C71A8;
	text-align: left;
}
 
.Menu ul
{
	list-style: none;
}
 
.Menu li
{
	float: left;
	position: relative;
	padding: 0px 10px 0px 10px;
}
 
.Menu li ul
{
	display: none;
	position: absolute;
	top: 1.2em;
	left: 0;
	width: 100px;
	background-color: #3C71A8;
	line-height: 19px;
	filter: alpha(opacity=90);
	padding: 4px 10px 4px 10px;
}
 
.Menu li>ul
{
	top: auto;
	left: auto;
}
 
.Menu li:hover ul, .Menu li.over ul
{
	display: block;
}
 
.Menu li ul li
{
	float: none;
}
 
.Menu a, .Menu a:visited, .Menu a:hover
{
	color: #FFFFFF;
	font-family: Verdana;
	font-weight: bold;
	font-size: 9pt;
}

**jp949** · 05/04/2006, 06h25

salut.
Pour que le menu fonctionne sans JVS sous IE il faut placer sur le serveur un fichier de comportement nommé " csshover.htc ".
dans le tuto que tu as suivi ce n'est pas precisé ?
En fait ce n'est qu'un fichier javascript ce qui revient a dire que le gars n'a pas fait la revolution avec ce tuto.
puisque de toute facion il faut JVS et que le code peut-etre inseré dans un fichier externe que l 'on appelle dans sa page comme tous les codes JVS.
Rien de nouveau sous le soleil

**cisse18** · 06/04/2006, 15h22

Ok, je vous remercie.

**cisse18** · 19/04/2006, 10h51

Avant de mettre un "résolu" je voulais revenir sur ce sujet. il semblerait que le problème que j'ai, d'après ce qu'on a pu me dire hors de ce forum, c'est que les lignes de mon code css doivent être à alterner afin que cela fonctionne. En effet, cette personne m'a dit qu'elle avait rencontré un problème similaire et que le soucis n'était pas du à un oubli de fichier ou autre. Seulement cette personne n'a pas eu le temps de m'en dire plus alors si quelqu'un sait quelles lignes il faut bouger? Personnellement, j'en ai aucune idée, j'ai bien essayé quelques trucs mais bof.
Voilà.
Si vous avez une idée.
Merci.

**Yogui** · 02/06/2006, 11h08

Salut

J'ai suivi l'article de DVP pour faire la même chose :
http://web.developpez.com/tutoriel/x...uderoulantcss/

Voici le résultat :
http://agilrehabilit.com/castellano-2/empresa.html

Sous Firefox : nickel.
Sous Internet Explorer (avec le SP1) : il me semble que ça passe correctement aussi.
Sous Internet Explorer (avec le SP2) : ça clignotte... Pourtant, je n'ai aucune image dans le menu.

J'ai une version Javascript qui me plaît moins mais qui a l'avantage de fonctionner partout :
http://agilrehabilit.com/castellano-2/empresa.html

**Yogui** · 02/06/2006, 12h38

Le souci est que je ne cherche pas à refaire mon menu ou à copier ce que quelqu'un d'autre a fait. Le menu est prêt, il ne reste qu'une légère incompatibilité dont je n'ai pas pu déterminer la raison.
De plus, cet article me semble peu intéressant dans la mesure où l'auteur explique très peu les éléments qui entrent en jeu et leurs interactions.
Pour terminer, il me semble qu'il y a de belles erreurs de sémantique dans cet article : l'auteur utilise des id au lieu des classes, alors qu'il ne s'agit pas de cas particuliers (ce qui est la cible des ids) mais bien de cas génériques (cible des classes).

menu déroulant en css

CSS

Vue hybride

Discussions similaires

Partager

Partager