Se connecter / S'enregistrer
Votre question

menu déroulant horizontal

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
23 Décembre 2006 16:08:12

Bonjour à tous,

Je viens demander de l'aide pour mettre en place un menu horizontal sur mon site qui serait facile à mettre à jour.
j'en ais actuellement un mais il ne marche pas avec le nouveau I.E. et mal avec firefox donc je veux le changer.
Cependant j'aime bien le fait qu'il soit en javascript ce qui fait qu'on a pas à changer sur toutes les pages de son site quand on rajoute une rubrique.
Si vous pouvez m'aider je vous en remercie.
Je vous souhaite de joyeuses fêtes.
:) 

Autres pages sur : menu deroulant horizontal

23 Décembre 2006 20:27:58

Code html
Citation :

<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" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<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('smenu2');">Menu 2</dt>

<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<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>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<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" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<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>


Code CSS
Citation :

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

24 Décembre 2006 15:26:18

Salut allstar27,

Merci de ta réponse !!
Il y a cependant un petit problème c'est que ce code n'est pas très pratique ... pour changer une seule rubrique (sous-menu) il faut la changer sur toutes les pages de son site !
Je veux absolument éviter celà, j'ai pas trop envie de me tapper plus de 100 pages à modifier pour seulement changer un truc.
Merci de ton aide, c'est sympa.
Bon réveillon de Noël !
26 Décembre 2006 11:10:47

Vous ne pouvez pas m'aider ??
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS