Bonjour,
J’ai vu dans divers tutoriaux qu’on pouvait, sous dreamweaver, créer un menu déroulant grace a des calques, en jouant sur les conditions d’apparition (mouseOver) et de disparition (mouseOut) du sous menu. Seulement lorsque je créé mon menu et que je le teste, le sous menu n’apparait pas où je l’ai mis, soit il est décalé d’une bonne centaine de pixels sur la gauche, soit il est carrément collé sur le côté gauche, etc. Bref j’ai des soucis avec la position d’apparition de ces calques.
ps: les calques que j’utilise sont des balises <div> et j’ai vu que d’autres sites utilisent les balises <ul> mais je n’arrive pas à m’en servir… Si quelqu’un pouvait m’expliquer pourquoi mes calques n’apparaissent pas là où ils devraient (en plus, ça donne pas le même résultat sous IE et sous FireFox!), ça serait super cool car ça fait 3 jours que je suis dessus :pt1cable: :sweet: Merci d’avance!
Voila un bout de code tiré de ce site que j’ai simplifié, il utilise javascript pour afficher le sous-menu au survol de la souris, même si ca peut aussi se faire rien qu’en CSS. Regarde la CSS justement pour voir ce qu’il faut mettre comme paramètres pour que ca soit aligné avec le titre du menu.
<html?gt;
<head><title>Menu déroulant</title>
<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">
<!--
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;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="java script: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>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="java script:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="site">
Le contenu du site
</div>
</body>
</html?gt;
Ok merci je vais regarder de ce côté là… J’avais déjà essayé de comparer le code source d’une page dans le style de ce que je voudrais avec le code source de ma page mais yavait (presque) aucun point commun donc j’en avais déduit que c’était pas fait de la même façon que moi. Je vais étudier les façon de faire ça en Javascript et la partie de code que tu as posté. Merci à toi en tout cas 
Youpiiii J’ai (en gros) réussi à faire ce que je voulais!!! :love:
J’y ai passé plusieurs jours et grâce à la page que tu m’as passé, j’ai réussi :super:
C’est largement plus simple comme ça! Il faut maintenant que j’intègre le CSS à toutes les pages de mon site et ça devrait être bon! Encore merci :jap:
De rien !
Et pour l’intégration, le plus smple c’est de faire un feuille CSS que tu inclus partout dans tes pages.
Bonjour,
Peut-être pourrais-tu m’aider ? Je suis en train de réaliser un site Web avec des menus déroulants.
Et j’ai des difficultés car mes menus déroulants je veux les faire dans un modèle (.dwt). Et je ne peux pas afficher le menu contextuel dans le comportement pour rentrer les lignes de sous-menus.
Comment as-tu fait tes menus déroulants ?
Merci pour ton aide,