18041 sujets

Questions générales et questions de débutants

Menu déroulant horizontal CSS & Javascript

Bonjour,
Je viens de découvrir votre site qui me soulage de la création d'un menu déroulant horizontal en css et javascript. (Donc déjà merci bcp Smiley biggrin )
Biensur, les modifications à apporter pour qu'il fasse ce que je souhaite me causent qlq soucis :
Voici l'histoire :
Ce menu sera présenté sur toutes les pages du site
Il a déjà dans le css un fond (bleu) et une police (blanche)

Ce que je souhaite :
Au survole de la souris l'onglet survolé prend une couleur de fond différente ainsi qu'une couleur de police différente (noire) qui seront spécifiques à cet onglet partout dans le site (et biensûr reprise dans le(s) sous-menu(s))
Faut-il modifier les css ou comme j'ai vainement tenté de la faire modifier le javascript ??
En gros c'est un peu l'idée du site de http://www.darty.com/

Je vais coller ci-dessous le code de ma page puis du css.... En attedant vos lumières.... merci d'avance.

page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<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';
	if (d = 'smenu1') {dt.comite='#ccc';} //ICI JE SOUHAITE MODIFIER LE JAVASCRIPT POUR DONNER UNE COULEUR A SMENU1 MAIS COMMENT ?
	}
}
//-->
</script>

<link href="css/test_menu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');" class="comite">Comité</dt>
			<dd id="smenu1" >
				<ul >
					<li><a href="election.php">Les élection</a></li>

					<li><a href="#">Notre équipe</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>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Billetterie</a></dt>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Activités</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Chasse</a></li>
					<li><a href="#">Voyages</a></li>

					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">Menu 4</dt>

			<dd id="smenu5">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu6');">Menu 4</dt>

			<dd id="smenu6">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu7');">Menu 7</dt>

			<dd id="smenu7">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	

</div>

</body>
</html>


CSS
/* CSS Document */

 
body {
margin: 0;
padding: 0;
background: white;
font: x-small, verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu */
top: 0;
left: 0;
z-index:100;
}
#menu dl {
float: left;
width: 12em;
color:#3366CC;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 1px solid;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #3366CC;
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-color: #FFFFFF;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #3366CC;
background-color: #FFFFFF;
padding: 5px;
border: 1px solid; 
}
/*
.comite {
	background-color: #B0DFEB;
	color:#ffffff;
} */

Modifié par dlamo (27 Jun 2007 - 13:55)
Sujet clos
Aller à