Cacher et montrer un sous-menu

Version imprimable

Bonjour à tous,

J'ai avancé depuis mon premier post sur ce forum.
Mon menu fonctionne et quand on clique sur un élément du menu ou des sous-menus, le libellé apparait bien dans la cellule de tableau située sous le menu. Et, s'il y a un sous-menu, celui-ci est caché pour que la cellule ne soit pas masquée.

Ces opérations sont effectuées par la fonction suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function liClic(id, cell)
{
  document.getElementById(cell).innerHTML=id.innerHTML;
  document.getElementById(cell).style.visibility = "visible";
  document.getElementById(cell).className = "bordure";
 
  var ulVal = getAncestorByTagName(id, 'ul');
  if (ulVal.id != "css3menu1")  //  différent de (<>) ou Not se code !=
  {
    if (ulVal.display =="none" || ulVal.display =="")
    {
	ulVal.style.display = "block"
    }
    else
    {
	ulVal.style.display = "none"
    }
  }
}

Cette fonction est appelée par le code html qui suit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<ul id="css3menu1" class="topmenu">
  <li><a onclick="liClic(this,'MusClasCell')" class="toproot"><span>la musique classique</span></a>
    <ul id="MusClassUl">
      <li><a onclick="liClic(this,'MusClasCell')">symphonique</a></li>
      <li><a onclick="liClic(this,'MusClasCell')">concertiste</a></li>
      <li><a onclick="liClic(this,'MusClasCell')">baroque</a></li>
    </ul>
  </li>
  <li><a onclick="liClic(this,'MusExoCell')" class="toproot"><span>la musique exotique</span></a>
    <ul id="MusExoUl">
      <li><a onclick="liClic(this,'MusExoCell')">hispano</a></li>
      <li><a onclick="liClic(this,'MusExoCell')">afro</a></li>
    </ul>
  </li>
  <li><a onclick="liClic(this,'CineCell')" class="topmenu">le cinéma</a></li>
  <li><a onclick="liClic(this,'ChansonCell')" class="toproot"><span>la chanson</span></a>
    <ul id="ChansonUl">
      <li><a onclick="liClic(this,'ChansonCell')">française</a></li>
      <li><a onclick="liClic(this,'ChansonCell')">anglo-saxonne</a></li>
    </ul>
  </li>
  <li><a onclick="liClic(this,'DanseCell')" class="toproot"><span>la danse</span></a>
    <ul id="DanseUl">
      <li><a onclick="liClic(this,'DanseCell')">rock</a></li>
      <li><a onclick="liClic(this,'DanseCell')">sud américaine</a></li>
    </ul>
  </li>
  <li><a onclick="liClic(this,'InstrumCell')" class="toproot"><span>les insruments</span></a>
    <ul id="InstrumUl">
      <li><a onclick="liClic(this,'InstrumCell')">à vent</a></li>
      <li><a onclick="liClic(this,'InstrumCell')"><span>à cordes</span></a>
        <ul id="CordesUl">
          <li onclick="liClic(this,'InstrumCell')"><a>pincées</a></li>
          <li><a onclick="liClic(this,'InstrumCell')">frottées</a></li>
        </ul>
      <li>
  </li>
      <li><a onclick="liClic(this,'InstrumCell')"><span>les percussions</span></a>
        <ul id="PercusUl">
          <li><a onclick="liClic(this, 'InstrumCell')">famille des pianos</a></li>
          <li><a onclick="liClic(this, 'InstrumCell')">batterie</a></li>
          <li><a onclick="liClic(this, 'InstrumCell')">autres</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a onclick="liClic(this, 'HitsCell')" class="topmenu">les hits</a></li>
  <li><a onclick="liClic(this, 'StyleCell')" class="topmenu">les styles</a></li>
  <li><a onclick="liClic(this, 'GrandsNomsCell')" class="topmenu">les grands noms</a></li>
</ul>

Mais une fois le sous-menu caché, il n'apparait plus au survol par la souris de l'élément parent du menu.

Ma question est de savoir comment réactiver le Hover de la feuille CSS.

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
table
{
}
.sansbordure
{
border : 0px;
}
 
 
.bordure
{
border:4px #3e4388;
border-style: ridge;
background-color : #99ccff;
}
ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:;border-width:0;border-style:solid;border-color:;}
ul#css3menu1 ul
{
display:none;position:absolute;left:0;top:100%;background-color:#47515B;border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;padding:0 0 10px;
}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px 10px 20px;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:10px 10px 10px 0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0 0 0 10px;}
ul#css3menu1 ul>li{
	margin:10px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial,sans-serif;color:#CBCFDB;cursor:default;padding:3px;background-color:#3e4388;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
	float:none;margin:0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#47515B;border-width:0 0 1px 0;border-style:solid;border-color:#3B444C;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial,sans-serif;color:#CBCFDB;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#686fca;border-style:none;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-image:url("../img/arrowmain0.gif");background-position:right center;background-repeat:no-repeat;padding-right:17px;}
ul#css3menu1 li:hover>a>span{
	background-image:url("../img/arrowmain1.gif");}
ul#css3menu1 ul span{
	background-image:url("../img/arrowsub.png");padding-right:12px;}
ul#css3menu1 ul li:hover > a span{
	background-image:url("../img/arrowsub.png");}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#333A41;border-style:solid;border-color:#616D8E;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 ul ul li{
	margin:10px 0 0;}
ul#css3menu1>li>a{
	padding:3px 10px;}
ul#css3menu1 li.toproot>a{
	border-width:0 0 3px 0;border-style:none;border-color:#3e4388;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;}
ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{
	border-style:solid;border-color:#686fca;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toproot:click>a,ul#css3menu1 li.toproot a.pressed{display:none}
ul#css3menu1 li.topmenu>a{
	border-width:0 0 3px 0;border-style:none;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
	border-style:none;}
body 
{
 
  overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
 
  padding:0;
  margin:0;		/* necesarry for the raster to fill the screen */
 
  height:100%;width:100%;
 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #99CCFF;
}
 
 
#bgimg 
{
 
  position:absolute;
 
  z-index: -1;
 
}
 
 
#realBody
{
 
  position:absolute;
 
  z-index: 5;				/* Place the new body above the background image */
 
  overflow:auto; 			/* restore scrollbars for the content */
 
  height:100%;width:100%;	/* Make the new body fill the screen */

Merci d'avance pour toute aide

08/10/2012, 15h16
Golgotha
Bonjour,

si tu force ton css à prendre la main :
Code:

1 2 3 ul#css3menu1 li:hover>* { display:block !important; }
ça marche.

ça ma parait bien complexe pour un menu :aie:
10/10/2012, 12h16
defluc

Oui, cela marche mais l'effet est le même qu'avant que j'aie introduit les instructions masquant les sous-menus après qu'un de leurs élément ait été cliqué.

Or, je voudrais garder cette action dans l'évènement onclick.

N'est-il pas possible de réactiver le css après ma fonction ?
11/10/2012, 23h20
defluc

Une question comme ça pour tenter d'avancer.

Comment se fait-il que les sous-menus ne sont pas cachés quand on met le focus sur un élément en dehors du menu alors qu'ils le sont quand on fait passer la souris en dehors de ce même menu ?

Avec mes remerciements anticipés.
12/10/2012, 14h40
Golgotha

Je suppose que cela viens de hover dans le css.

Bonjour,
...lu la discussion en diagonale mais

Citation:

Comment se fait-il que les sous-menus ne sont pas cachés quand on met le focus sur un élément en dehors du menu alors qu'ils le sont quand on fait passer la souris en dehors de ce même menu ?

c'est souvent le sort quand on gère avec javascript et le CSS ce genre de menu.

Le style "inline", dans les balises, est prioritaire par rapport à celui de la feuille de style et le javascript modifie cellui qui es "inline".
exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Le piège</title> <style> li ul li{ display:none; } li:hover ul li{ display:block; } </style> </head> <body> <ul> <li>Menu <ul> <li onclick="this.style.display='block';">Lien1</li> <li>Lien2</li> </ul> </li> </ul> </body> </html>

12/10/2012, 15h30
Golgotha

Oui, il y à un mélange javascript / css qui se marche dessus.

Il fraudais que tu te sépare de l'un ou de l'autre.
19/10/2012, 12h44
defluc

Ajouter un click au hover dans le CSS pour cacher l'ul serait-il une solution ?

Citation:

Envoyé par defluc

Ajouter un click au hover dans le CSS pour cacher l'ul serait-il une solution ?

pas sûr qu'il faille mélanger les deux, je me dirigerais plus vers du tout javascript avec initialisation des onmouseover/out sur les éléments LI.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var oMenu = document.getElementById('css3menu1'); // l'ID est tres mal choisie du coup var oLU, oLI = oMenu.getElementsByTagName('LI'); var i, nb = oLI.length; for( i=0; i <nb; i++){ oLI[i].onmouseout = function(){ oUL = this.getElementsByTagName('UL'); if( oUL.length){ oUL[0].style.display = 'none'; } } oLI[i].onmouseover = function(){ oUL = this.getElementsByTagName('UL'); if( oUL.length){ oUL[0].style.display = 'block'; } } }
ou un truc pas loin.

29/10/2012, 17h57
defluc

J'ai simplifié le fichier css.

Par rapport à la suggestion de NoSmoking, c'est au clic que je veux cacher mes sous-menus car si la souris sort du sous-menu, celui-ci disparait bien.

Comme on peut le tester sur le lien suivant http://www.defgnee.com/test/, quand on clique sur un élément du menu principal, celui-ci s'affiche dans une cellule.
Mais si on clique sur un élément de sous-menu, celui-ci cache la cellule.

J'ai testé les instructions d'affichage et de disparition du sous-menu par des boutons.
Mais quand je place l'instruction dans la fonction LiClic, cela ne fonctionne pas.
J'ai essayé de placer le focus sur un autre composant de la page. J'ai également simulé par programme un clic sur un autre composant. Rien à faire.
Pourtant, l'instruction alert provoque la disparition du sous-menu. Il doit bien y avoir une autre instruction qui n'oblige pas à afficher un message et à cliquer sur un bouton ok.

Merci à tous pour votre attention.
30/10/2012, 20h33
NoSmoking

Je dois admettre que j'ai du mou dans le cerveau :lol:
Peux tu repréciser ce que tu souhaites faire au final, faire disparaitre les menus/sous menus, les affichages des cellules :koi: car dans ton code je ne vois pas trace de ma proposition.
30/10/2012, 20h55
defluc

Ce que je souhaite, c'est que les sous-menus soient cachés quand on clique sur un de ses éléments pour que la cellule qui affiche le contenu qui a été cliqué ne soit pas masqué par le sous-menu en question.

Dans ce cas supprimes la gestion du hover dans le CSS pour la faire en javascript

Code:

1
2
3
ul#css3menu1 li:hover > * {
/*    display: block !important; /* A SUPPRIMER */
}

et pour la gestion en javascript ajoutes en fin de fichier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var oMenu = document.getElementById('css3menu1'); // l'ID est tres mal choisie du coup
var oLU, oLI = oMenu.getElementsByTagName('LI');
var i, nb = oLI.length;
for( i=0; i <nb; i++){
  // mouse OUT et click même traitement
  oLI[i].onmouseout = oLI[i].onclick = function(){
    oUL = this.getElementsByTagName('UL');
    if( oUL.length){
      oUL[0].style.display = 'none';
    }
  }
  oLI[i].onmouseover = function(){
    oUL = this.getElementsByTagName('UL');
    if( oUL.length){
      oUL[0].style.display = 'block';
    }
  }
}

02/11/2012, 16h26
defluc

Cela répond tout à fait à mes attentes.

Mille mercis