question sur menu déroulant
J-F Portala
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
SAM
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
J-F Portala
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=false; }
if(document.body.style.color!="") { blnOk=false; }
if(document.body.style.marginTop!="") { blnOk=false; }
if(document.getElementById) {
with(document.getElementById("texte1").style) {
if(position!="") { blnOk=false; }
if(top!="") { blnOk=false; }
if(left!="") { blnOk=false; }
if(width!="") { blnOk=false; }
if(height!="") { blnOk=false; }
if(zIndex!="") { blnOk=false; }
if(margin!="") { blnOk=false; }
if(padding!="") { blnOk=false; }
if(visibility!="") { blnOk=false; }
}
}
else{
blnOk=false;
}
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> :</span></a></p>
<p id="menu2" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu2');"
onfocus="MontrerMenu('ssmenu2');">Menu2<span> :</span></a></p>
<ul id="ssmenu2" class="ssmenu">
<li><a href="#">Menu 2.1</a><span> ;</span></li>
<li><a href="#">Menu 2.2</a><span> ;</span></li>
</ul>
<p id="menu3" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu3');"
onfocus="MontrerMenu('ssmenu3');">Menu3<span> :</span></a></p>
<ul id="ssmenu3" class="ssmenu">
<li><a href="#">Menu 3.1</a><span> ;</span></li>
<li><a href="#">Menu 3.2</a><span> ;</span></li>
<li><a href="#">Menu 3.3</a><span> ;</span></li>
</ul>
<p id="menu4" class="menu"><a href="#"
onmouseover="MontrerMenu('ssmenu4');" onfocus="MontrerMenu('ssmenu4');">Menu
4<span> :</span></a></p>
<ul id="ssmenu4" class="ssmenu">
<li><a href="#">Menu 4.1</a><span> ;</span></li>
<li><a href="#">Menu 4.2</a><span> ;</span></li>
</ul>
</div>
<script>
Chargement() ;
</script>
</body>
</html>