Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP question sur menu déroulant

question sur menu déroulant

2 réponses
Avatar
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
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
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
<http://www.openweb.eu.org/IMG/article49/etape3.html> )

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
Avatar
J-F Portala
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?

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<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">
<li><a href="#">Menu 2.1</a><span>&nbsp;;</span></li>
<li><a href="#">Menu 2.2</a><span>&nbsp;;</span></li>
</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">
<li><a href="#">Menu 3.1</a><span>&nbsp;;</span></li>
<li><a href="#">Menu 3.2</a><span>&nbsp;;</span></li>
<li><a href="#">Menu 3.3</a><span>&nbsp;;</span></li>
</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">
<li><a href="#">Menu 4.1</a><span>&nbsp;;</span></li>
<li><a href="#">Menu 4.2</a><span>&nbsp;;</span></li>
</ul>
</div>
<script>
Chargement() ;
</script>
</body>
</html>