Sujet Précédent Sujet Suivant

Problème menu déroulant sur site e-commerce

Fermé
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013 - 22 sept. 2013 à 11:24
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013 - 22 sept. 2013 à 12:41
Bonjour, pouvez vous me dire comment faire pour que le menu déroulant de mon site (www.habitat-design.net) s'affiche uniquement quand on passe la souris sur le menu? Actuellement le menu s'affiche même quand la souris est 4 cm en dessous du menu.
Merci d'avance pour vos réponses
A voir également:

7 réponses

Réponse 1 / 7
jean448 Messages postés 1331 Date d'inscription mardi 29 décembre 2009 Statut Membre Dernière intervention 26 janvier 2017 237
Modifié par irongege le 26/10/2013 à 15:59
Salut
Si c'est le menu en noir moi il marche nickel
0
Réponse 2 / 7
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013
22 sept. 2013 à 11:44
Le problème c'est que le menu en noir s'affiche même quand la souris ne survol pas ce menu, il s'affiche par exemple si la souris passe à 3 cm en dessous du menu, ce qui n'est pas normal
0
jean448 Messages postés 1331 Date d'inscription mardi 29 décembre 2009 Statut Membre Dernière intervention 26 janvier 2017 237
Modifié par irongege le 26/10/2013 à 16:00
Nan vraiment quand je passe à moins de 1cm il ne se passe rien
regarde ici ma souris était au bout de la flèche ( on peut pas la voir avec un simple imprime écran)
0
Réponse 3 / 7
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013
22 sept. 2013 à 12:00
regarde sur mon pc

https://www.youtube.com/watch?v=IJqNcf4NZ80&feature=youtu.be
0
Réponse 4 / 7
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013
22 sept. 2013 à 12:04
précision: Le problème est en dessous du menu
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013
22 sept. 2013 à 12:07
voici le code
<div id="cadre_menu">
<ul id="menu">
<li class="mitext menusep" id="pmenuradiateurs" onmouseover="OxMenu('menuradiateurs',true)" onmouseout="OxMenu('menuradiateurs',false)">
<form method="post" id="gotoa" action="design.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="al" /></form>
<a href='#' onclick='document.getElementById("gotoa").submit()'>Radiateurs Design</a>
<div><ul class="sousmenurad" id="menuradiateurs" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goaa" action="horizontaux.html"></form>
<a href='#' onclick='document.getElementById("goaa").submit()'>Radiateurs horizontaux</a>
</li>
<li class="montexte">
<form method="post" id="goab" action="verticaux.html"></form>
<a href='#' onclick='document.getElementById("goab").submit()'>Radiateurs verticaux</a>
</li>
<li class="montexte">
<form method="post" id="goac" action="accessoires.html"></form>
<a href='#' onclick='document.getElementById("goac").submit()'>Accessoires</a>
</li>
<li class="montexte">
<form method="post" id="goad" action="chromes.html"></form>
<a href='#' onclick='document.getElementById("goad").submit()'>Radiateurs Chromés</a>
</li>
<li class="montexte">
<form method="post" id="goae" action="inox.html"></form>
<a href='#' onclick='document.getElementById("goae").submit()'>Radiateurs Inox</a>
</li>
<li class="montexte">
<form method="post" id="goaf" action="mixtes.html"></form>
<a href='#' onclick='document.getElementById("goaf").submit()'>Radiateurs Mixtes</a>
</li>
<li class="montexte">
<form method="post" id="goag" action="seches-serviettes.html"></form>
<a href='#' onclick='document.getElementById("goag").submit()'>Radiateurs Sèches serviettes</a>
</li>
<li class="montexte">
<form method="post" id="goah" action="tendance.html"></form>
<a href='#' onclick='document.getElementById("goah").submit()'>Radiateurs Tendance</a>
</li>
<li class="montexte">
<form method="post" id="goai" action="sur-mesure.php"></form>
<a href='#' onclick='document.getElementById("goai").submit()'>Radiateurs sur mesure</a>
</li>
<li class="montexte" id="pmenuelect" onmouseover="OxMenu('menuelect',true)" onmouseout="OxMenu('menuelect',false)">
<form method="post" id="goaj" action="electriques-design.html"></form>
<a href='#' onclick='document.getElementById("goaj").submit()'>Radiateurs Electriques Design</a>
<div><ul class="sousmenuele" id="menuelect" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goaja" action="seches-serviettes-electriques.html"></form>
<a href='#' onclick='document.getElementById("goaja").submit()'>Radiateurs Sèches Serviettes Electriques</a>
</li>
<li class="montexte">
<form method="post" id="goajb" action="electriques.html"></form>
<a href='#' onclick='document.getElementById("goajb").submit()'>Radiateurs électriques</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenuporteentree" onmouseover="OxMenu('menuporteentree',true)" onmouseout="OxMenu('menuporteentree',false)">
<form method="post" id="gotob" action="menuiseries.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="al" /></form>
<a href='#' onclick='document.getElementById("gotob").submit()'>Menuiseries</a>
<div><ul class="sousmenuporte" id="menuporteentree" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goba" action="portes-entree-pvc.html"></form>
<a href='#' onclick='document.getElementById("goba").submit()'>Portes d'entrée PVC</a>
</li>
<li class="montexte">
<form method="post" id="gobb" action="portes-entree-alu.html"></form>
<a href='#' onclick='document.getElementById("gobb").submit()'>Portes d'entrée Aluminium</a>
</li>
<li class="montexte">
<form method="post" id="gobc" action="portes-entree-bois-metal.html"></form>
<a href='#' onclick='document.getElementById("gobc").submit()'>Portes d'entrée Bois/metal</a>
</li>
<li class="montexte">
<form method="post" id="gobd" action="portes-sur-mesure.php"></form>
<a href='#' onclick='document.getElementById("gobd").submit()'>Portes sur mesure</a>
</li>
<li class="montexte">
<form method="post" id="gobe" action="fenetres-sur-mesure.php"></form>
<a href='#' onclick='document.getElementById("gobe").submit()'>Fenêtres sur mesure</a>
</li>
<li class="montexte">
<form method="post" id="gobf" action="verandas-sur-mesure.html"></form>
<a href='#' onclick='document.getElementById("gobf").submit()'>Vérandas</a>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenuportegarage" onmouseover="OxMenu('menuportegarage',true)" onmouseout="OxMenu('menuportegarage',false)">
<form method="post" id="gotoc" action="portes-garage.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="ba" /></form>
<a href='#' onclick='document.getElementById("gotoc").submit()'>Portes de garage</a>
<div><ul class="sousmenuportg" id="menuportegarage" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goca" action="portes-garage-sectionnelles.html"></form>
<a href='#' onclick='document.getElementById("goca").submit()'>Portes de garage sectionnelles</a>
</li>
<li class="montexte">
<form method="post" id="gocb" action="portes-garage-basculantes.html"></form>
<a href='#' onclick='document.getElementById("gocb").submit()'>Portes de garage basculantes</a>
</li>
<li class="montexte">
<form method="post" id="gocc" action="portes-garage-coulissantes.html"></form>
<a href='#' onclick='document.getElementById("gocc").submit()'>Portes de garage Coulissantes en latéral</a>
</li>
<li class="montexte">
<form method="post" id="gocd" action="portes-garage-industielles.html"></form>
<a href='#' onclick='document.getElementById("gocd").submit()'>Portes de garage industielles</a>
</li>
<li class="montexte">
<form method="post" id="goce" action="motorisation-porte-garage.html"></form>
<a href='#' onclick='document.getElementById("goce").submit()'>Motorisation Porte de garage</a>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenucheminees" onmouseover="OxMenu('menucheminees',true)" onmouseout="OxMenu('menucheminees',false)">
<form method="post" id="gotod" action="cheminees.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="ba" /></form>
<a href='#' onclick='document.getElementById("gotod").submit()'>Cheminées Ethanol</a>
<div><ul class="sousmenuche" id="menucheminees" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goda" action="cheminees-murales.html"></form>
<a href='#' onclick='document.getElementById("goda").submit()'>Murales</a>
</li>
<li class="montexte">
<form method="post" id="godb" action="cheminees-posees-au-sol.html"></form>
<a href='#' onclick='document.getElementById("godb").submit()'>Posées au sol</a>
</li>
<li class="montexte">
<form method="post" id="godc" action="cheminees-ouvertes.html"></form>
<a href='#' onclick='document.getElementById("godc").submit()'>Ouvertes</a>
</li>
<li class="montexte">
<form method="post" id="godd" action="cheminees-gamme-eco.html"></form>
<a href='#' onclick='document.getElementById("godd").submit()'>Gamme économique</a>
</li>
<li class="montexte">
<form method="post" id="gode" action="cheminees-exterieur.html"></form>
<a href='#' onclick='document.getElementById("gode").submit()'>Cheminées d'extérieurs</a>
</li>
<li class="montexte">
<form method="post" id="godf" action="cheminees-insert-traditionnels.html"></form>
<a href='#' onclick='document.getElementById("godf").submit()'>Cheminée/insert traditionnels</a>
</li>
<li class="montexte">
<form method="post" id="godg" action="accessoires-cheminees.html"></form>
<a href='#' onclick='document.getElementById("godg").submit()'>Accessoires</a>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenuexterieur" onmouseover="OxMenu('menuexterieur',true)" onmouseout="OxMenu('menuexterieur',false)">
<form method="post" id="gotoe" action="exterieur-design.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="al" /></form>
<a href='#' onclick='document.getElementById("gotoe").submit()'>Extérieur design</a>
<div><ul class="sousmenuext" id="menuexterieur" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goea" action="sauna.html"></form>
<a href='#' onclick='document.getElementById("goea").submit()'>Sauna</a>
</li>
<li class="montexte">
<form method="post" id="goeb" action="spa.html"></form>
<a href='#' onclick='document.getElementById("goeb").submit()'>Spa</a>
</li>
<li class="montexte">
<form method="post" id="goec" action="mobilier-design.html"></form>
<a href='#' onclick='document.getElementById("goec").submit()'>Mobiler Design</a>
</li>
<li class="montexte" id="pmenuparasol" onmouseover="OxMenu('menuparasol',true)" onmouseout="OxMenu('menuparasol',false)">
<form method="post" id="goed" action="parasols.html"></form>
<a href='#' onclick='document.getElementById("goed").submit()'>Parasols Chauffants</a>
<div><ul class="sousmenupar" id="menuparasol" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goeda" action="parasols-gaz.html"></form>
<a href='#' onclick='document.getElementById("goeda").submit()'>Parasols Chauffants gaz</a>
</li>
<li class="montexte">
<form method="post" id="goedb" action="parasols-electriques.html"></form>
<a href='#' onclick='document.getElementById("goedb").submit()'>Parasols Chauffants Electriques</a>
</li>
</ul>
</div>
</li>
<li class="montexte" id="pmenubarbecu" onmouseover="OxMenu('menubarbecu',true)" onmouseout="OxMenu('menubarbecu',false)">
<form method="post" id="goee" action="cuisson-design.html"></form>
<a href='#' onclick='document.getElementById("goee").submit()'>Barbecues Design</a>
<div><ul class="sousmenubar" id="menubarbecu" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goeea" action="cuisson-planchas.html"></form>
<a href='#' onclick='document.getElementById("goeea").submit()'>Planchas</a>
</li>
<li class="montexte">
<form method="post" id="goeeb" action="cuisson-portables.html"></form>
<a href='#' onclick='document.getElementById("goeeb").submit()'>Camping/Portables</a>
</li>
<li class="montexte">
<form method="post" id="goeec" action="cuisson-electriques.html"></form>
<a href='#' onclick='document.getElementById("goeec").submit()'>Barbecues électriques</a>
</li>
<li class="montexte">
<form method="post" id="goeed" action="cuisson-inox.html"></form>
<a href='#' onclick='document.getElementById("goeed").submit()'>Barbecues inox</a>
</li>
<li class="montexte">
<form method="post" id="goeef" action="cuisson-bois.html"></form>
<a href='#' onclick='document.getElementById("goeef").submit()'>Barbecues bois</a>
</li>
<li class="montexte">
<form method="post" id="goeeg" action="cuisson-fuego.html"></form>
<a href='#' onclick='document.getElementById("goeeg").submit()'>Fuego</a>
</li>
</ul>
</div>
</li>

</ul>
</div>
</li>
<li class="mitext menusep" id="pmenubioethanol">
<form method="post" id="gotof" action="bio-ethanol.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="ba" /></form>
<a href='#' onclick='document.getElementById("gotof").submit()'>Bio éthanol</a>
<div><ul class="sousmenubio" id="menubioethanol">
<li class="montexte">
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript" language="javaScript">
// <![CDATA[
function OxMenu(menu,display)
{
var objElem=(document.getElementById)?document.getElementById(menu):document[menu];
objElem.style.visibility=display?'visible':'hidden';
}
function OxHandleSubMenu(id,over)
{
var newClass='subactive', objElem=(document.getElementById)?document.getElementById(id):document[id];
if (!objElem) return;
var cls = objElem.className, idx = (' '+cls+' ').indexOf(' ' + newClass + ' ');
if (over)
{
if(idx<0) objElem.className=cls+(cls?' ':'')+newClass;
}
else if(idx>=0) objElem.className=objElem.className.replace(new RegExp('(\\s|^)'+newClass+'(\\s|$)'),' ');
}
function OxSubMenu(elem,over)
{
OxHandleSubMenu('a'+elem.id,over);
}
// ]]>
</script>
<div id="navigation">
<a href="index.php">Accueil</a><a href="<? echo $lien_url ?>"><? echo $nom_url ?></a><? echo $nom_du_lien;
if($pseudo!="") { echo " Votre pseudo est : ".$pseudo."";}?>

</div>
0
Réponse 6 / 7
jean448 Messages postés 1331 Date d'inscription mardi 29 décembre 2009 Statut Membre Dernière intervention 26 janvier 2017 237
Modifié par irongege le 26/10/2013 à 16:00
J'en est fais un en HTML + CSS uniquement et il marche bien donc je te passent mon code source si ça peut t'aider (Pour le tien je peut pas trop t'aider je connais pratiquement rien en js)

------------------------------------HTML-----------------------------------------

<ul id="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Film</a>
<ul id="menu2">
<li><a href="film.php">Voir tout</a></li>
<li><a href="ajout.php">En ajouter un</a></li>
<li><a href="film.php?genre=Action">Action</a></li>
<li><a href="film.php?genre=Comedie">Comedie</a></li>
<li><a href="film.php?genre=Horreur">Horreur</a></li>
<li><a href="film.php?genre=Fantastique">Fantastique</a></li>
<li><a href="film.php?genre=Science fiction">Science fiction</a></li>
<li><a href="film.php?genre=Drame">Drame</a></li>
<li><a href="film.php?genre=Catastrophe">Catastrophe</a></li>
</ul>
</li>
<li><a href="#">Serie</a>
<ul id="menu2">
<li><a href="serie.php">Voir tout</a></li>
<li><a href="ajout1.php">En ajouter une</a></li>
<li><a href="serie.php?genre=Action">Action</a></li>
<li><a href="serie.php?genre=Comedie">Comedie</a></li>
<li><a href="serie.php?genre=Horreur">Horreur</a></li>
<li><a href="serie.php?genre=Fantastique">Fantastique</a></li>
<li><a href="serie.php?genre=Science fiction">Science fiction</a></li>
<li><a href="serie.php?genre=Drame">Drame</a></li>
<li><a href="serie.php?genre=Catastrophe">Catastrophe</a></li>
</ul>
</li>
<li><a href="demande.php">Demande</a></li>
</ul>

----------------------------------LE CSS---------------------------------------

/***MENU***/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0
}
#menu li {
display: inline-block;
position: relative;
}
#menu2 li {
display: inline-block;
position: relative;
z-index:4;
}
#menu a {
display: block;
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
background: #121212;
color:#ffffff;
text-decoration:none;
font-size: 18px;
font-weight:bold;
border:-1px solid blue;
}
#menu a:hover {
display: block;
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
background: #5c5c5c;
color:#ffffff;
text-decoration:none;
font-size: 18px;
font-weight:bold;

}
#menu2 a {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background:#383838;
color:#ffffff;
text-decoration:none;
font-size: 11px;
font-weight:none;
z-index:2;
}
#menu2 a:hover {
display: block;
width: 98px;
height: 30px;
line-height: 30px;
text-align: center;
background:#5a5a5a;
color:#ffffff;
text-decoration:none;
font-size: 14px;
font-weight:none;
border-right:2px solid red;
z-index:2;
}
#menu ul {
left: -4000px;
position: absolute
}
#menu li:hover > ul {
left: 0
}
#menu li li:hover > ul {
left: 150px;
top: 0
}

------------------------------

La différence entre menu et menu2 se fais sur les couleurs
0
Réponse 7 / 7
evareb Messages postés 6 Date d'inscription dimanche 22 septembre 2013 Statut Membre Dernière intervention 22 septembre 2013
22 sept. 2013 à 12:41
merci
0

Discussions similaires

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses