Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Menu déroulant horizontal

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu déroulant horizontal

Message par Satsu Black le Ven 15 Juil 2011 - 11:28

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

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal

Message par Scipion le Ven 15 Juil 2011 - 15:47

Bonjour

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

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal

Message par Satsu Black le Ven 15 Juil 2011 - 15:52

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

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum