Menu déroulant au clic
sia_sia
-
sia_sia -
sia_sia -
Bonjour a tous, je viens sollicité votre aide pour un problème de menu.
en fait je veux créer un menu qui se déroule au clic de la souris. Mais j'ai un petit soucis par ce que quand je clic sur mon menu ya de le premier onglet qui s'ouvre et se bloc et je ne peux plus affiché les autres onglets.
Est ce que vous pourriez m'aider s'il vous plait?
voici mon code:
html:
<html <div id="monmenu" onclick="document.getElementById('ss-menu').style.display='block';">
<ul class="active" style="positon: absolute; top: -50%;">
<li class="niveau2" style="positon: absolute; top: -50%;"> Qui somme nous?
<ul id="ss-menu" style="width: 600px; height: 400px; border: 0px;">
<h5><a href="Presentation.html"> Présentation de l'entreprise :</a></h5>
</ul>
</li>
<li class="niveau2" style="positon: absolute; top: -50%;"> Entreprise
<ul id="ss-menu" style="width: 1900px; height: 400px; border: 0px;">
<a href="entreprise.php"><img src="images/entreprise1.png" style=" left: 173px; width: 140px; heigh: 50px;" class="imageflottante" alt="Image flottante"/></a><br/><br/>
</ul>
</li>
</ul>
</div>
</html>
css:
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li{list-style-type: none; position: relative; width: 140px; height: 30px; background-color: #EEF3F7; padding: 2px; margin: 0px}
#monmenu li li{list-style-type: none; position: absolute; top: -40%; width: 780px; height: 400px; background-color: white; padding: 2px; margin: 0px}
#monmenu li a {text-decoration:none;}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
en fait je veux créer un menu qui se déroule au clic de la souris. Mais j'ai un petit soucis par ce que quand je clic sur mon menu ya de le premier onglet qui s'ouvre et se bloc et je ne peux plus affiché les autres onglets.
Est ce que vous pourriez m'aider s'il vous plait?
voici mon code:
html:
<html <div id="monmenu" onclick="document.getElementById('ss-menu').style.display='block';">
<ul class="active" style="positon: absolute; top: -50%;">
<li class="niveau2" style="positon: absolute; top: -50%;"> Qui somme nous?
<ul id="ss-menu" style="width: 600px; height: 400px; border: 0px;">
<h5><a href="Presentation.html"> Présentation de l'entreprise :</a></h5>
</ul>
</li>
<li class="niveau2" style="positon: absolute; top: -50%;"> Entreprise
<ul id="ss-menu" style="width: 1900px; height: 400px; border: 0px;">
<a href="entreprise.php"><img src="images/entreprise1.png" style=" left: 173px; width: 140px; heigh: 50px;" class="imageflottante" alt="Image flottante"/></a><br/><br/>
</ul>
</li>
</ul>
</div>
</html>
css:
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li{list-style-type: none; position: relative; width: 140px; height: 30px; background-color: #EEF3F7; padding: 2px; margin: 0px}
#monmenu li li{list-style-type: none; position: absolute; top: -40%; width: 780px; height: 400px; background-color: white; padding: 2px; margin: 0px}
#monmenu li a {text-decoration:none;}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
7 réponses
-
Bonjour,
Déjà à vue d'oeil, il y a pas mal de fautes dans ton code.
Laisse-moi juste 2 minutes. -
Bon,
Sans vouloir être méchant, ton code est quasiment totalement faux.
Je te conseil de repartir avec quelque chose de... juste.
J'ai trouvé quelque chose d'excellent.
Va voir ce site et dis-moi si c'est ce que tu cherches.
Sinon j'ai corrigé(un peu)/mis en page ton/tes codes.
je te les renvois même si ils marchent toujours pas.<html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div id="monmenu" onclick="document.getElementById('ss-menu').style.display='block';"> <ul class="active" style="positon: absolute; top: -50%;"> <li class="niveau2" style="positon: absolute; top: -50%;"> Qui somme nous ? <ul id="ss-menu" style="width: 600px; height: 400px; border: 0px;"> <h5> <a href="Presentation.html"> Présentation de l'entreprise : </a> </h5> </ul> </li> <li class="niveau2" style="positon: absolute; top: -50%;"> Entreprise <ul id="ss-menu" style="width: 1900px; height: 400px; border: 0px;"> <a href="entreprise.php"><img src="images/entreprise1.png" style=" left: 173px; width: 140px; heigh: 50px;" class="imageflottante" alt="Image flottante" /> </a><br><br> </ul> </li> </ul> </div> </body> </html>
-
Effectivement c'est comme ce menu que je voudrais faire. Mais pas que le menu se déroule au passage de la souris mais seulement au clic.
Merci de ton coup de main.
je vais regardé le tuto et essayé de corriger.
Merci et a tout suite ;) -
Si ce n'est que ça, va dans le fichier dynMenu.js et remplace ce code :
addAnEvent(lis.item(i),'mouseover',show); addAnEvent(lis.item(i),'mouseout',timeoutHide); addAnEvent(lis.item(i),'blur',timeoutHide); addAnEvent(lis.item(i),'focus',show);
par ce code :
addAnEvent(lis.item(i),'click',show); addAnEvent(lis.item(i),'blur',timeoutHide); addAnEvent(lis.item(i),'click',show);
et le tour est joué ! -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
J'arrive pas à télécharger l'exemple. Le fichier est en (.gz). Est ce que par hasard t'aurais le script?
-
Tu n'arrives pas à le télécharger ou bien à le décompresser ?
-
-
-
-
youpi ça marche. Encore merci pour ton aide c'est super gentille.
Une dernière question pour la route :)
Si je veux que le premier onglet soit active quand on arrive sur la page sans même cliqué dessus comment je fais?
