Compagnons-Forbach

author	version	line-number	content
		1
		2	{{html}}
		3	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		4	<html>
		5	<head>
		6	<title>Menu déroulant en Javascript</title>
		7	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		8
		9	<script type="text/javascript">
		10	<!--
		11	window.onload=montre;
		12	function montre(id)
		13	{
		14	var d = document.getElementById(id);
		15	for (var i = 1; i<=10; i++)
		16	{
		17	if (document.getElementById('smenu'+i))
		18	{document.getElementById('smenu'+i).style.display='none';}
		19	}
		20	if (d)
		21	{d.style.display='block';}
		22	}
		23	//-->
		24	</script>
		25
		26
		27	<style type="text/css">
		28	<!--
		29	/* CSS issu des tutoriels http://css.alsacreations.com */
		30	body {
		31	margin: 0;
		32	padding: 0;
		33	background: white;
		34	font: 80% verdana, arial, sans-serif;
		35	}
		36	dl, dt, dd, ul, li {
		37	margin: 0;
		38	padding: 0;
		39	list-style-type: none;
		40	}
		41	#menu {
		42	position: absolute;
		43	top=;
		44	bottom:80%;
		45	left: 0px;
		46	z-index:100px;
		47	width: 100%;
		48	}
		49	#menu dl {
		50	float: left;
		51	width: 12em;
		52	position: relative;
		53	margin: 0 2px;
		54	}
		55	#menu dt {
		56	cursor: pointer;
		57	text-align: center;
		58	font-weight: bold;
		59	background: #ccc;
		60	border: 1px solid gray;
		61
		62	}
		63	#menu dd {
		64	background-color: #ccc;
		65	position: absolute;
		66	bottom:1.5em;
		67	width:100%;
		68	}
		69	#menu li {
		70	text-align: center;
		71	}
		72	#menu li a, #menu dt a {
		73	color: #000;
		74	text-decoration: none;
		75	display: block;
		76	height: 100%;
		77	border: 0 none;
		78	}
		79	#menu li a:hover, #menu dt a:hover {
		80	background: #eee;
		81	}
		82
		83	#site {
		84	position: absolute;
		85	z-index: 1;
		86	top : 70px;
		87	left : 10px;
		88	color: #000;
		89	background-color: #ddd;
		90	padding: 5px;
		91	border: 1px solid gray;
		92	}
		93
		94	a {text-decoration: none;
		95	color: black;
		96	color: #222;
		97	}
		98	-->
		99	</style>
		100	</head>
		101
		102	<body >
		103
		104	<div id="menu" >
		105	<dl>
		106	<dt onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt>
		107	</dl>
		108
		109	<dl>
		110	<dt onmouseover="menuDeroulant('smenu1');" >Menu 1</dt> // faire apparaitre smenu1 passage de la souris
		111	<dd id="smenu1" style="display:none;" > // ne pas l'afficher
		112	<ul >
		113	<li><a href="#">Sous-Menu 1.1</a></li>
		114
		115	<li><a href="#">Sous-Menu 1.2</a></li>
		116	<li><a href="#">Sous-Menu 1.3</a></li>
		117	<li><a href="#">Sous-Menu 1.4</a></li>
		118	<li><a href="#">Sous-Menu 1.5</a></li>
		119	<li><a href="#">Sous-Menu 1.6</a></li>
		120	</ul>
		121
		122	</dd>
		123	</dl><dl>
		124	<dt onmouseover="menuDeroulant('smenu1');" >Menu 1</dt>
		125
		126	<dd id="smenu1" style="display:none;" > // ne pas l'afficher
		127	<ul >
		128	<li><a href="#">Sous-Menu 1.1</a></li>
		129
		130	<li><a href="#">Sous-Menu 1.2</a></li>
		131	<li><a href="#">Sous-Menu 1.3</a></li>
		132	<li><a href="#">Sous-Menu 1.4</a></li>
		133	<li><a href="#">Sous-Menu 1.5</a></li>
		134	<li><a href="#">Sous-Menu 1.6</a></li>
		135	</ul>
		136
		137	</dd>
		138	</dl>
		139
		140
		141	<dl>
		142	<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
		143	<dd id="smenu2">
		144	<ul>
		145	<li><a href="#">Sous-Menu 2.1</a></li>
		146	<li><a href="#">Sous-Menu 2.2</a></li>
		147
		148	<li><a href="#">Sous-Menu 2.3</a></li>
		149	<li><a href="#">Sous-Menu 2.4</a></li>
		150	</ul>
		151	</dd>
		152	</dl>
		153
		154	<dl>
		155	<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
		156
		157	<dd id="smenu3">
		158
		159	<ul>
		160	<li><a href="#">Sous-Menu 3.1</a></li>
		161	<li><a href="#">Sous-Menu 3.2</a></li>
		162	<li><a href="#">Sous-Menu 3.3</a></li>
		163	<li><a href="#">Sous-Menu 3.4</a></li>
		164
		165	<li><a href="#">Sous-Menu 3.5</a></li>
		166
		167	</ul>
		168	</dd>
		169	</dl>
		170
		171	<dl>
		172	<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
		173	<dd id="smenu4">
		174	<ul>
		175
		176	<li><a href="#">Sous-Menu 4.1</a></li>
		177
		178	<li><a href="#">Sous-Menu 4.2</a></li>
		179	<li><a href="#">Sous-Menu 4.3</a></li>
		180	</ul>
		181	</dd>
		182	</dl>
		183
		184
		185	</div>
		186
		187
		188	</body>
		189	</html>
		190	{{/html}}

Code source wiki de Code test