11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous Smiley cligne

Je cherchais une methde pour faire un menu déroulant et je suis tombé sur votre site.
grand bien m'en a pris puisque j'ai trouvé mon bonheur ( merci Smiley lol )

Cepandant j'ai un léger souci.
Le site que je suis entrain de devlopper est en php et donc j'utilise des includes pour les menu , header , footer ...

Or quand j utilise votre code de menu horisontal dans mon fichier header.php et que ce meme fichier est appeler sur l'index via l'include , le menu ne se trouve pas a ca place.
Il est systematiquement placé en haut de la page et non dans la ligne du tableau ou je souhaiterais qu il se trouve.

Si quelqu un sait comment resoudre ce petit souci Smiley smile ...

Merci Smiley cligne
donc le menu fonctionne mais n'est pas placé au bonne endroits c'est ça ?

ce serait possible de voir le code ? Soit en le mettant directement ici, soit en donnant des liens menant aux pages concernées.
Désoler mais pour le moment je ne peut rien maitre en ligne.

Sinon le code est simple , j'ai un fichier header.php qui contient le menu :


<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>
<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" media="screen">
<!-- 
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; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction 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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>


C'est simplement celui du tuto

Et dans mon index.php a un endroti j'ai :
<tr> 
    <td height="23" colspan="2"> 
      <? include('includes/header.php'); ?>
      &nbsp;</td>
  </tr>


Donc normalement mon menu devrait se trouver dans la ligne du tableau correspondantes.
Or il se met systematiquement en haut a gauche de la page
Bonsoir,

à première vue, jdirais que le problème n'a rien à voir avec javascript et se situe là :

#menu {
[#red]position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;[/#]
z-index:100;
width: 100%; /* correction pour Opera */
}

Il faut savoir (c'est subtil, je te l'accorde...) que s'il est mis "à modifier selon vos besoins", c'est parce que, comment dire... "vos besoins" pourraient différer de ce qui est proposé Smiley cligne