question sur menu déroulant

Le
J-F Portala
Bonjour,

je viens de tester le menu horizontal déroulant dynamique proposé dans
openWeb
http://www.openweb.eu.org/articles/menu_universel.
Dans l'exemple , il y a un div avec du texte qui permet de cacher les
sous-menus lorsque la souris est sur le texte
et donc quitter cacher les parties inutiles du menu.

J'ai oté ce div pour avoir un menu plus indépendant du contenu de la page
mais
j'observe maintenant le comportement suivant.
Si on clique sur un des items horizontaux du menu, une liste de sous menus
s'affiche.
Si on déplace la souris sur ces sous menus puis que l'on sort du sous menu,
ceux
ci restent en place affichés.
Le fait de balader ensuite la souris sur toute la page ne change rien. Le
menu reste déroulé.

Est ce que l'on peut faire autrement sans mettre un div?

Merci de vote aide

Jeff
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22034721
Le 8/26/09 9:31 PM, J-F Portala a écrit :
Bonjour,

je viens de tester le menu horizontal déroulant dynamique proposé dans
openWeb
http://www.openweb.eu.org/articles/menu_universel.
Dans l'exemple , il y a un div avec du texte qui permet de cacher les
sous-menus lorsque la souris est sur le texte
et donc quitter cacher les parties inutiles du menu.

J'ai oté ce div pour avoir un menu plus indépendant du contenu de la page
mais
j'observe maintenant le comportement suivant.
Si on clique sur un des items horizontaux du menu, une liste de sous menus
s'affiche.
Si on déplace la souris sur ces sous menus puis que l'on sort du sous menu,
ceux
ci restent en place affichés.
Le fait de balader ensuite la souris sur toute la page ne change rien. Le
menu reste déroulé.

Est ce que l'on peut faire autrement sans mettre un div?



Essayer en mettant dans chaque OL :

onmouseout="CacherMenus();"

Mézalors le onfocus des menus ne fonctionnera plus
(ou encore moins bien que sur la démo

On doit pouvoir enfermer tous les trucs menus dans un même div (à
re-styler(*)) qui aura ce onmouseout

(*) le re-stylage se fait dans le JS

for(i=1;i<=3;i++) {
with(document.getElementById("menu"+i).style) {
position="absolute";
top="3em"; <--- ça se passe là

for(i=1;i<=3;i++) {
with(document.getElementById("ssmenu"+i).style) {
position="absolute";
top="4.4em"; <--- et ici

Le div conteneur des menus sera à styler en absolute à top:3em;



--
sm
J-F Portala
Le #22034711
Bonjour et merci de ton aide,
j'ai essayé de mettre un div contenant le menu mais
des que je me déplace sur un sous menu celui ci disparait.
J'ai essayé de matérialiser le div contenant pour comprendre ce qui se
passe.

J'ai mis tout le code dans une seule page.
Est ce grave docteur?

<html>
<head>
<title>Menu principal</title>
<style>
hr {
display:none;
}

#contenant {
position:absolute ;
top:1.2em ;
background-color:green;
height:4.2em ;
width:900px ;
}


.menu, .ssmenu {
background-color:#eeeeee;
color:#995599;
border:0.05em solid #333333;
margin:1em;
}

.menu span, .ssmenu span {
display:none;
}

.menu a, .ssmenu a {
text-decoration:none;
color:#5555ff
}

.menu {
padding:0 1em;
}

.ssmenu {
padding:0;
}

.ssmenu li {
list-style-type:disc;
list-style-position:inside;
padding-left:0.2em;
color:#9999ee;
}

.ssmenu li:hover, .ssmenu a:hover,
.ssmenu a:focus {
background-color:#9999ff;
color:#FFF;
}

.ssmenu li:hover {
list-style-type:circle;
}

</style>
</head>
<body>
<script type="text/javascript">
<!--
var blnOk=true;
var nbmenu = 10;

function Chargement() {
/*
if(document.body.style.backgroundColor!="") { blnOkúlse; }
if(document.body.style.color!="") { blnOkúlse; }
if(document.body.style.marginTop!="") { blnOkúlse; }
if(document.getElementById) {
with(document.getElementById("texte1").style) {
if(position!="") { blnOkúlse; }
if(top!="") { blnOkúlse; }
if(left!="") { blnOkúlse; }
if(width!="") { blnOkúlse; }
if(height!="") { blnOkúlse; }
if(zIndex!="") { blnOkúlse; }
if(margin!="") { blnOkúlse; }
if(padding!="") { blnOkúlse; }
if(visibility!="") { blnOkúlse; }
}
}
else{
blnOkúlse;
}
alert(blnOk) ;
*/
if(blnOk) {
with(document.body.style) {
backgroundColor="#dddddd";
color="#000000";
marginTop="2.2em";
}

}
chargemenu() ;
}

function chargemenu()
{
for(i=1;i<=nbmenu;i++) {
if ( document.getElementById("menu"+i) == null ) continue ;
with(document.getElementById("menu"+i).style) {
position="absolute";
top="0.5em";
left=(((i-1)*8)+1)+"em";
width="8em";
height="1.2em";
textAlign="center";
margin="0";
padding="0";
zIndex="2";
}
}

for(i=1;i<=nbmenu;i++) {
if ( document.getElementById("ssmenu"+i) == null ) continue ;
with(document.getElementById("ssmenu"+i).style) {
position="absolute";
top="1.6em";
left=(((i-1)*8)+1)+"em";
width="16em";
margin="0";
padding="0";
zIndex="3";
}
}

CacherMenus();
}
function MontrerMenu(strMenu) {
if(blnOk) {
CacherMenus();
document.getElementById(strMenu).style.visibility="visible";
}
}

function CacherMenus() {
if(blnOk) {
for(i=1;i<=nbmenu;i++) {
if ( document.getElementById("ssmenu"+i) == null ) continue ;
with(document.getElementById("ssmenu"+i).style) {
visibility="hidden";
}
}
}
}
//-->
</script>

<div id="contenant" onmouseout="CacherMenus();">
<p id="menu1" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu1');"
onfocus="MontrerMenu('ssmenu1');">Menu1<span>&nbsp;:</span></a></p>
<p id="menu2" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu2');"
onfocus="MontrerMenu('ssmenu2');">Menu2<span>&nbsp;:</span></a></p>
<ul id="ssmenu2" class="ssmenu">
</ul>
<p id="menu3" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu3');"
onfocus="MontrerMenu('ssmenu3');">Menu3<span>&nbsp;:</span></a></p>
<ul id="ssmenu3" class="ssmenu">
</ul>
<p id="menu4" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu4');" onfocus="MontrerMenu('ssmenu4');">Menu
4<span>&nbsp;:</span></a></p>
<ul id="ssmenu4" class="ssmenu">
</ul>
</div>
<script>
Chargement() ;
</script>
</body>
</html>
Publicité
Poster une réponse
Anonyme