[Javascript]

aelabdal Messages postés 3 Date d'inscription mardi 26 décembre 2006 Statut Membre Dernière intervention 14 mars 2008 - 26 déc. 2006 à 17:57
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 -
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 1709 Date d'inscription vendredi 7 juillet 2000 Statut Membre Dernière intervention 24 mars 2009 185
27 déc. 2006 à 10:27
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
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 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
27 déc. 2006 à 11:56
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