[Javascript]

aelabdal Messages postés 3 Statut Membre -  
kij_82 Messages postés 4260 Statut Contributeur -
Bonjour,

Je viens de réaliser un site dans lequel j'ai intégré un menu déroulant en utilisant le javascript. Le code, je l'avais trouvé sur le net, mais celui-ci ne marche plus. Est ce que quelqun pourrait me dire pourquoi? Merci

Voici le 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>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/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">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>
</head>

<body>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</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="">Menu 2</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</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="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</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>

</div>


<div id="site">
<h1>Menu horizontal déroulant en CSS</h1>
<p>Testé sous Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
<p>Il vous suffit d'adapter le code source de cette page à vos besoins. </p>
</div>

<div class="mentions">Raphaël GOETTER<br />
<a href="https://www.alsacreations.com/">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour</a></div>

</body>
</html>

1 réponse

P@ Messages postés 1710 Statut Membre 185
 
chez moi ca fonctionne, l'onglet n'a rien ... mais c'est normal il n'y a rien dans le code pour afficher
qu'est ce qui ne "fonctionne pas" ??
0
Amina
 
En fait, le probléme est dans l'affichage, rien ne s'affiche, je ne sais pas sur quel navigateur on peut utilisé le code du javascript, car j'ai utilisé plusieurs code, mais rien ne s'affiche.
merci
0
kij_82 Messages postés 4260 Statut Contributeur 857
 
Comme tu le souligne, rien ne s'affiche car ton navigateur n'interpréte pas ce code javascript.
Cela peut venir que d'une seule chose je pense, le fait d'utiliser ces instructions :
getElementById


qui n'est reconnu que de certains navigateur (netscape > 6.x ou 5.x je sais plus et IE7)

La validité est à vérifier je suis pas très sur mais il me semble que c'est ç peu pres ca. Donc si tu utilise un autre navigateur c'est normal que rien ne s'affiche. D'ailleurs, dans la console javascript de ton navigateur tu devrais voir apparaitre des erreurs.

Pour ce qui est de la détection du navigateur, regarde ici :
https://ditch.developpez.com/javascript/compatibilite/

Tu as meme une fonction qui "recré" la fonction getElementById" si ton navigateur ne le comprend pas :)
0