Cacher et montrer un sous-menu

**defluc** · 06/10/2012, 16h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Golgotha** · 08/10/2012, 15h16

Bonjour,

si tu force ton css à prendre la main :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça marche.

ça ma parait bien complexe pour un menu

**defluc** · 10/10/2012, 12h16

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 ?

**defluc** · 11/10/2012, 23h20

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.

**Golgotha** · 12/10/2012, 14h40

Je suppose que cela viens de hover dans le css.

**NoSmoking** · 12/10/2012, 15h08

Bonjour,
...lu la discussion en diagonale mais

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**defluc** · 29/10/2012, 17h57

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.

**NoSmoking** · 30/10/2012, 20h33

Je dois admettre que j'ai du mou dans le cerveau

Peux tu repréciser ce que tu souhaites faire au final, faire disparaitre les menus/sous menus, les affichages des cellules

car dans ton code je ne vois pas trace de ma proposition.

**defluc** · 30/10/2012, 20h55

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.

**NoSmoking** · 02/11/2012, 14h54

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et pour la gestion en javascript ajoutes en fin de fichier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
    }
  }
}

**defluc** · 02/11/2012, 16h26

Cela répond tout à fait à mes attentes.

Mille mercis

Cacher et montrer un sous-menu

JavaScript

Vue hybride

Discussions similaires

Partager

Partager