28173 sujets

CSS et mise en forme, CSS3

Menu horizontal

hello !

Je cherche à mettre en place un menu horizontal, je suis donc partie de l'exemple donné sur ce site (http://css.alsacreations.com/modelesmenus/hd2.htm).

Lorsque je clic sur un menu, son sous-menu s'affiche : jusque là tout va bien.

Mon menu est un peu plus graphé ; j'ai donc ajouté des images pour dessiner les différents onglets.
J'ai en faite 3 types d'onglet :
- 1 en position On (signale la page où l'on se trouve)
- 1 en position Off (link)
- 1 en position Off (a:hover)


Mon problème : je voudrais que lorsque l'on clique sur un menu, l'onglet cliqué change de statut (de off à on) et que celui qui était On devienne Off.

Comment faire ?

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" language="javascript">
<!--
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>

<style type="text/css">
<!--
#menu {
position : absolute;
left: 50px;
top: 20px;
width: 768px;
}
/*onglet accueil*/

#menu dt a#menu1 {
	display: block;
	width: 136px;
	height: 28px;
	background-image: url(images/ong_on.gif);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	text-align: center;
	line-height: 28px;
	text-decoration: none;
}
#menu dt a:hover#menu1 { 
	display: block;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	background-image: url(images/ong_off_vert_136.gif);
	background-repeat: no-repeat;
}
/**/
/*tous les autres onglets*/
#menu dt a#menu2 { 

	display: block;
	width: 124px;
	height: 28px;
	background-image: url(images/ong_off_bleu.gif);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	line-height: 28px;
	text-decoration: none;
}
#menu dt a:hover#menu2 { 
	display: block;
	color: #000000;
	text-decoration: none;
	background-image: url(images/ong_off_vert.gif);
	background-repeat: no-repeat;
}
/**/
dl, dd, ul, li {
list-style-type: none;
margin: 0px 2px 0px 0px;
padding: 0px;
}
ul {
background-image:url(images/barre_bleue.gif);
background-repeat:repeat-x;
line-height: 28px;
}
#menu dl {
float: left;
}
#menu li {
display: inline;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: center;
}
#menu a {
text-decoration: none;
color: #000000;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, {
position: absolute;
left: 0px;
font-size: 11px;
width: 768px;
}
-->
</style>
</head>

<body onload="montre('smenu1');">

<div id="menu">
	<dl>
		<dt onClick="montre('smenu1');"><a href="#" id="menu1">Menu 1</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Menu 1.1</a></li>
					<li><a href="#">Menu 1.2</a></li>
					<li><a href="#">Menu 1.3</a></li>
					<li><a href="#">Menu 1.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>			
		<dt onClick="montre('smenu2');"><a href="#" id="menu2">Menu 2</a></dt>
			<dd id="smenu2">
				<ul>
						<li><a href="#">Menu 2.1</a></li>
						<li><a href="#">Menu 2.2</a></li>
						<li><a href="#">Menu 2.3</a></li>
						<li><a href="#">Menu 2.4</a></li>
						<li><a href="#">Menu 2.5</a></li>
						<li><a href="#">Menu 2.6</a></li>
						<li><a href="#">Menu 2.7</a></li>
						<li><a href="#">Menu 2.8</a></li>
						<li><a href="#">Menu 2.9</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onClick="montre('smenu3');"><a href="#" id="menu2">Menu 3</a></dt>
			<dd id="smenu3">
				<ul>
						<li><a href="#">Menu 3.1</a></li>
						<li><a href="#">Menu 3.2</a></li>
						<li><a href="#">Menu 3.3</a></li>
						<li><a href="#">Menu 3.4</a></li>
						<li><a href="#">MEnu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onClick="montre('smenu4');"><a href="#" id="menu2">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Menu 4.1</a></li>
				</ul>
			</dd>
	</dl>

	<dl>	
		<dt onClick="montre('smenu5');"><a href="#" id="menu2">Menu 5</a></dt>
			<dd id="smenu5">
				<ul>
					<li><a href="#">Menu 5.1</a></li>
					<li><a href="#">Menu 5.2</a></li>
				</ul>
			</dd>
	</dl>

	<dl>	
		<dt onClick="montre('smenu6');"><a href="#" id="menu2">Menu 6</a></dt>
			<dd id="smenu6">
				<ul>
					<li><a href="#">Menu 6.1</a></li>
					<li><a href="#">Menu 6.2</a></li>
					<li><a href="#">Menu 6.3</a></li>
				</ul>
			</dd>
	</dl>

</div>

</body>
</html>



Merci pour vos conseils.
Sujet clos
Aller à