Menu déroulant horizontal
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème divers :: Archives des problèmes divers
Page 1 sur 1 • Partagez
Menu déroulant horizontal
Bonjour!
j'ai trouvé une super astuce dans forumactif, très clair et bien expliquée, facilement modifiable,
le seul probleme : quand arrive l'astuce pour avoir le menu en horizontal, j'ai beau faire comme indiquer, mon menu apparait en vertical, c'est peut être une erreur de ma part, mais j'aimerai vraiment que mon menu soit comme celui indiqué dans l'astuce!
lien de l'astuce :
https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant
Code que j'ai installer :
merci de votre aide!
j'ai trouvé une super astuce dans forumactif, très clair et bien expliquée, facilement modifiable,
le seul probleme : quand arrive l'astuce pour avoir le menu en horizontal, j'ai beau faire comme indiquer, mon menu apparait en vertical, c'est peut être une erreur de ma part, mais j'aimerai vraiment que mon menu soit comme celui indiqué dans l'astuce!
lien de l'astuce :
https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant
Code que j'ai installer :
- Spoiler:
- Code:
<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 {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#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;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
<!-- FIN DU CSS -->
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="url-de-renvoi" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 1.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.4</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.5</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.4</a></li>
<li><a href="url-de-renvoi">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="url-de-renvoi">Sous-Menu 4.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 4.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
merci de votre aide!
Dernière édition par Satsu Black le Ven 15 Juil 2011 - 15:52, édité 1 fois
Re: Menu déroulant horizontal
Bonjour
Veuillez tester svp votre code de menu déroulant horizontal :
Veuillez tester svp votre code de menu déroulant horizontal :
- Code:
<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 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><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('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>
<li><a href="">Sous-Menu 2.4</a></li>
</ul>
</dd>
</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>
Re: Menu déroulant horizontal
ah! maintenant il marche a merveille!
désolé, soit c'était un bug, soit une partie que j'avais zaper!
merci de votre aide en tout cas ^^
désolé, soit c'était un bug, soit une partie que j'avais zaper!
merci de votre aide en tout cas ^^
Sujets similaires
» Menu déroulant horizontal - enlever le déplacement de texte
» Menu Horizontal
» Menu accordéon horizontal
» Menu accordéon horizontal
» Juste changer la couleur de la police du menu horizontal
» Menu Horizontal
» Menu accordéon horizontal
» Menu accordéon horizontal
» Juste changer la couleur de la police du menu horizontal
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème divers :: Archives des problèmes divers
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum