11548 sujets

JavaScript, DOM et API Web HTML5

Codage JavaScript pour regrouper menu horizontal et vertical

Bonjour,

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.

Merci d'avance

Thibault
Bonjour et bienvenu surle Forum Smiley smile

Afin d'aider à la résolution de ton problème, je te conseille de soumettre le code déjà en place et d'expliquer à quel endroit tu bloques.

Car en l'état, tu ne risques pas de rencontrer trop de réponses... Smiley cligne
Re,

Voici mon codage. Il s'agit simplement du tutoriel proposé ou j'ai juste renommé les menus et les liens pour les pages html. je souhaite rajouter le codage "variante verticale" (tutoriel) en plus de ce codage la, mais je ne sais absolument pas ou le placer. merci de votre aide car je débute dans le javascript.



<!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>

Modifié par the-tibo (04 Aug 2008 - 10:57)
Hello the-tibo Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

En passant, le codage correspond à la rédaction du code et il s'agit de javascript (en un seul mot) à ne pas confondre avec le java. Smiley cligne

Bonne continuation Smiley smile
Désolé pour les oublis, j'y ferai attention désormais.

Dans l'attente d'une quelconque aide.

Merci
Une petite aide pour le problème avec mon codage serait la bienvenue car je suis bloqué depuis ce matin. Merci
Sujet clos
Aller à