Bonsoir,
N'ayant aucune réponse dans une autre partie du forum (partie consacrée au javascript), je viens m'adresser dans celui en espérant de l'aide que j'attends depuis ce matin...
J'ai utilisé comme codage en javascript les exemples du tutoriel proposé pour créer un menu horizontal. Tout a marché super bien. Génial. Maintenant j'aimerai rajouter en plus de ce menu déjà créé le tutoriel "Une variante verticale". Comment faire pour regrouper les deux codages sans s'emmêler les pinceaux.
Voici le codage utilisé pr le menu horizontal (il s'agit ni plus ni moins que du tutoriel modifié pour les liens et les menus):
Merci de votre aide
N'ayant aucune réponse dans une autre partie du forum (partie consacrée au javascript), je viens m'adresser dans celui en espérant de l'aide que j'attends depuis ce matin...
J'ai utilisé comme codage en javascript les exemples du tutoriel proposé pour créer un menu horizontal. Tout a marché super bien. Génial. Maintenant j'aimerai rajouter en plus de ce menu déjà créé le tutoriel "Une variante verticale". Comment faire pour regrouper les deux codages sans s'emmêler les pinceaux.
Voici le codage utilisé pr le menu horizontal (il s'agit ni plus ni moins que du tutoriel modifié pour les liens et les menus):
<!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">
<!--
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';}
}
//-->
</script>
<style type="text/css">
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%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
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;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</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');"><a href="" title="Retour à l'accueil">Nouveauté</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Notre Showroom</dt>
<dd id="smenu2">
<ul>
<li><a href="RPB43#1.html">Rpb43</a></li>
<li><a href="MENDEUTIQUE48#1.html">Mendeutique48</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Nos Produits</dt>
<dd id="smenu3">
<ul>
<li><a href="Papier.html">Support Papier</a></li>
<li><a href="Consommables.html">Consommables</a></li>
<li><a href="Divers.html">Divers</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Nos Services</dt>
<dd id="smenu4">
<ul>
<li><a href="service.html">Service Client</a></li>
<li><a href="financement.html">Financement</a></li>
<li><a href="Environnement.html">Environnement</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>Merci de votre aide