Menu

[MissCindy]

Bonjour,

J'ai un petit souci avec un menu. J'ai suivi un tuto mais... le résultat n'est pas comme je l'attendais. J'me suis sûrement trompé quelque part :

https://2img.net/h/oi51.tinypic.com/214wdp3.jpg

Normalement, les "menu 1" "menu2" etc doivent être collés & les sous-menu doivent apparaître au passage de la souris...

Voici le css :

Code:

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

Merci !

[SoraNoHime]

Bonjour

quel tutoriel avez-vous suivi ? Normalement il vous faut un script pour faire fonctionner ceci , l'avez-vous installer ?

Cordialement.

[MissCindy]

J'ai suivi celui ci : https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant

& non je n'ai rien installé. Comment faire ?

[SoraNoHime]

Comme expliquer vous avez tout le code à mettre dans un widget...

Puis-je avoir le code de votre menu ? Je vous expliqueait ensuite la marche à suivre. Cordialement.

[MissCindy]

J'ai mis ça dans ma PA :

Code:

<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">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>
</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>

</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>
</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>
</dl>


</div>

[SoraNoHime]

Oui donc il vous manque le script ^^

Insérez ceci avant votre tableau dans la PA

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>

Cordialement.

[MissCindy]

Mercii ! Ça marche. Sauf que maintenant, mes menus sont les uns en dessous des autres. Comment faire pour qu'ils soient côté à côté ?

[SoraNoHime]

Donc c'était le tuto du dessous que vous auriez du prendre ^^

Mettez ceci pour votre tableau sans changer à ce que je vous ai fourni tout à l'heure

Code:

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

[MissCindy]

En mettant ça, j'obtiens ce que j'avais au départ.

https://2img.net/h/oi51.tinypic.com/214wdp3.jpg

[SoraNoHime]

Voici nomalement tout ce que vous devriez avoir :

Dans l'emplacement choisi pour les liens :

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>

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

et dans la css :

Code:

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

Cela marche chez moi, pouvez vous refaire un essai avec ces codes ?

[MissCindy]

Effectivement, ça marche !
Merci beaucoup ! & dernière chose, la balise center ne fonctionne pas ?

[SoraNoHime]

Vous désirez aligner le texte ou le menu ?

[MissCindy]

Le menu

[SoraNoHime]

Mettez le dans un tableau à centrer ^^

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>

    <center><table><tr><td><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></td></tr></table></center>

[MissCindy]

Ça fonctionne ! Merci beaucoup !

Edit : Dernière question (a) :
Au passage de la souris, les sous menu apparaissent. Mais comment faire pour qu'ils disparaissent aussi lorsque j'enlève la souris ?

[SoraNoHime]

Normalement, ils doivent disparaitre seuls non ?

Sinon c'est un problème de script, et là ce n'est plus vraiment mon domaine. J'espère que quelqu'un d'autre pourra vous aider à ce sujet.

Bonne journée.

[MissCindy]

Non, ça ne disparaît pas...
D'accord, merci encore !

[MissCindy]

Petit up

[MissCindy]

[tupac]

Bonjour

Je peux vous proposer ce menu dont les sous menu disparaissent.

Code a placer dans votre page d'accueil.

Spoiler:

Puis la partie CSS a placer dans votre feuille de style.

Spoiler:

[MissCindy]

C'est parfait ! Merci beaucoup !