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;}
A voir également:
- Menu déroulant au clic
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Atout clic - Télécharger - Éducatifs
- Menu caché tv continental edison ✓ - Forum Téléviseurs
7 réponses
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.
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 ;)
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 :
par ce code :
et le tour est joué !
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?
