11548 sujets

JavaScript, DOM et API Web HTML5

Changer le style d'un élément ou d'un ensemble au survol d'un autre

Bonjour,

j'ai un problème avec un menu déroulant.
Lorsque je survole le premier niveau du menu, les sous menus apparaissent et le style du lien survolé change (via une propriété :hover dans ma feuille de style).

Mon problème est que lorsque je descend dans les sous menus, le style de mon lien de premier niveau revient à celui d'origine ce qui est très inésthétique.

J'ai donc cherché à modifier ce comportement en javascript mais je me heurte à la barrière de mon incompétence dans ce domaine.

l'exemple de mon problème (j'ai épuré la page) :
http://mjules.free.fr/divers/

J'ai tenté d'utiliser une fonction getelementsbyclassname pour récupérer les a avec la bonne classe et leur appliquer un style mais je ne parviens pas à appliquer le style au bon lien.

Bref, je suis complètement paumé. En particulier, je ne sais pas de quel façon je pourrais aborder le problème, sans même parler du code.

Merci de toute infos ou de toute aide que vous pourriez m'apporter Smiley smile



le code html :

<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />
<meta http-equiv="content-language" content="fr" />
<style type="text/css" media="print">
@import url(print.css);
</style>
<style type="text/css" media="screen,projection">
@import url(style.css);
</style>
<script type="text/javascript" src="dynmenu.js"></script>
	</head>

	<body id ="banniere">
		<div class="conteneur">
		<div id="fondmenu">
<div class="menuhaut" id="menu" >
				<dl>
					<dt>
						<a id="menuhaut" href="index.htm">Accueil</a>
					</dt>

				</dl>
				<dl>
					<dt>
						<a class="sousmenu" id="activite1" href="activite.htm">Activités</a>
					</dt>
					<dd id="ssmenu1">
						<ul>
							<li>

								<a href="activite.htm#bouteilles">Bouteilles</a>
							</li>
							<li>
								<a href="activite.htm#respi">Appareils&nbsp;respiratoires</a>
							</li>
							<li>
								<a href="activite.htm#extincteurs">Extincteurs</a>

							</li>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt>
						<a class="sousmenu" id="activite2" href="entreprise.htm">L'entreprise</a>
					</dt>

					<dd id="ssmenu2">
						<ul>
							<li>
								<a href="entreprise.htm#client">Nos clients</a>
							</li>
							<li>
								<a href="entreprise.htm#moyen">Nos moyens</a>
							</li>

						</ul>
			
					</dd>
				</dl>
	
				<dl>
					<dt>
						<a href="contact.htm">Contactez-nous</a>
					</dt>
				</dl>

			</div>
</div>		</div>
	</body>

</html>



La feuille de style :
body {
	font-family : verdana,sans-serif;
	background-color: #EDEDED;
	font-size: 90%;
}

a img {
	border-style: none;
}

.conteneur {
  	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	margin-top: -5px;
}


/* Menu deroulant */
dt, dl, dd, li {
list-style-type: none;
margin: 0;
padding: 0;
}

ul {
list-style-type: none;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
}

#fondmenu {
  position: absolute;
  display:block;
  width: 100%;
  top: 155px;
  height: 1.7em;
  z-index: 1;
  background:#2584C6;
}

.menuhaut {
position: absolute;
width: 100%;
z-index: 3;
font-size: medium;
}

.menuhaut dl {
float: left;
width: 22%;
}

.menuhaut a {
margin: 0px;
height: 1.5em;
display: block;
text-align: center;
font-weight: bold;
text-decoration: none;
color: white;
background: #2584C6;
}

.menuhaut a:hover, a:focus {
	background-color: #EFF2F6;
	color: #003E6D;
}


/* les sousmenus animés */
#ssmenu1, #ssmenu2{
	float: left;
	width: 100%;
	display: none;
}

#ssmenu1 a,#ssmenu2 a{
	font-size: smaller;
	font-weight: normal;
	color: black;
	background-color: #EFF2F6;
	border-color: #003E6D;
	border : 1px solid #DFE1E5;
}

#ssmenu1 a:hover,#ssmenu2 a:hover,#ssmenu1 li:hover,#ssmenu2 li:hover{
	background-color: #ADB9C5;
	color: white;
}



voilà le script que j'ai utilisé pour réaliser la partie dynamique du menu :

<!--
// script tiré de celui de chmel du forum alsacreations.com et un peu modifié par mes soins

window.onload=function(){dynMenu("menu",300)} // temporisé 300 millisecondes

dynMenu = function(idMenu,delai) {planq=0;
Menu=document.getElementById(idMenu);
dls = Menu.getElementsByTagName("dl");
dds = Menu.getElementsByTagName("dd");
if(dds){
  for(var i=0;i<dls.length;i++) {
    dls[i].onmouseover=function(){
			clearTimeout(planq);   
      smenu=this.getElementsByTagName("dd")[0]
           if(smenu){cachetout(); smenu.style.display="block";} else cachetout();
    	}
   dls[i].onmouseout=function(){
    if(delai)planq=setTimeout('cachetout()',delai);
  	}
   }
cachetout()
  }
document.onclick=cachetout;
}
function cachetout(){for(var j=0;j<dds.length;j++)dds[j].style.display="none";}
//-->

[/i][/i]
Modifié par Mjules (09 Jul 2006 - 16:47)
Sujet clos
Aller à