show hide div et changement couleur

**innommables** · 23/03/2009, 14h55

voisi mon probleme,
je souhaite un menu type
menu1 menu2 menu3 menu4
sousmenu1 sousmenu2 sousmenu3...

En javascript avec un show hide layer pas de probleme (du moins j'ai trouve le code qui me rend heureux,
mais voila au meme moment je souhaite que le background color de mon entite menu change.
Le tout devant reste actif jusqu'au moment ou ma souris va sur une autre entite menu

voici mon code

javascript

Code :

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

1
2
3
4
5
6
7
8
9
function toggleDiv(id)
{
	for (x=1; x<=11; x++)
	{
		document.getElementById("ssmenu"+x).style.display = 'none';
 
	}	
	document.getElementById(id).style.display = 'block';	
}

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
#menu{
	position:absolute;
	width: 1000px;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	top: 0;
	left: 0;}
 
 
#ssmenu{
	width: 1000px;
    height: 25px;
	}
 
#menu_1 {
	width: 1000px;
	background-color:#AE5600;
 
}
#nav {
height:25px;
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
	overflow: hidden ;
	/*overflow: visible ;
	height: 1% ;*/
	}
#nav li {
	float: left ;
	margin-right: 1px ;
	}
#nav li a {
 
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#D9CE9D;
	text-align: center;
	text-decoration: none;
	line-height: 25px;		
	}
#nav li a:hover{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#D9CE9D;
	/*background-color:#4874A0;*/
	}
 
 
 
#ssmenugen{
	width: 1000px;
	background: #E1DEC8;
	}
.ssmenu{
	background-image:url(../img/png/bg_ssmenu.png);
	height:25px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	line-height: 25px;		
	}
 
.ssmenu a {
 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
 
}
 
.ssmenu a:hover {
 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:underline;
}
 
.home {
vertical-align:top;
width:37px;
 
}
 
.ssmenuhome{
 
	height:25px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	line-height: 25px;		
	}

et enfin html

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
<div id="menu_1">
      <ul id="nav">
      <li class="home"><a href="#" onmouseover="bouton.src = 'img/png/home_on.png'; toggleDiv('ssmenu11');" onmouseout="bouton.src = 'img/png/home_off.png';"><img src="img/png/home_off.png" name=bouton width="37" height="25" border="0"></a></li>
      <li style="width:78px"><a href="#" onmouseover="toggleDiv('ssmenu1'); ">POLITIQUE</a></li>
      <li style="width:165px"><a href="#" onmouseover="toggleDiv('ssmenu2');">ÉCONOMIE ET BUSINESS</a></li>
      <li style="width:64px"><a href="#" onmouseover="toggleDiv('ssmenu3');">SOCIÉTÉ</a></li>
      <li style="width:55px"><a href="#" onmouseover="toggleDiv('ssmenu4');"><SPORT</a></li>
      <li style="width:120px"><a href="#" onmouseover="toggleDiv('ssmenu5');">GRIN DE CULTURE</a></li>
      <li style="width:54px"><a href="#" onmouseover="toggleDiv('ssmenu6');">SANTÉ</a></li>
      <li style="width:137px"><a href="#" onmouseover="toggleDiv('ssmenu7');">DÉBATS &amp; OPINIONS</a></li>
      <li style="width:112px"><a href="#" onmouseover="toggleDiv('ssmenu8');">PERSONNALITÉS</a></li>
      <li style="width:73px"><a href="#" onmouseover="toggleDiv('ssmenu9');">DOSSIERS</a></li>
      <li style="width:94px"><a href="#" onmouseover="toggleDiv('ssmenu10');">L'INTERVIEW</a></li>
        </ul>
       </div>
	  	  <div id="ssmenugen">
          <div class="ssmenu" id="ssmenu1" style="display: none">| <a href="#">LIEN POLITIQUE 1</a>  | <a href="#">LIEN POLITIQUE 2</a> | <a href="#">LIEN POLITIQUE 3</a> | <a href="#">LIEN POLITIQUE 4</a> | <a href="#">LIEN POLITIQUE 5</a> | </div>
          <div class="ssmenu" id="ssmenu2" style="display: none">| <a href="#">LIEN ECONOMIE ET... 1</a>  | <a href="#">LIEN ECONOMIE ET... 2</a> | <a href="#">LIEN ECONOMIE ET... 3</a> | <a href="#">LIEN ECONOMIE ET... 4</a> |</div>
          <div class="ssmenu" id="ssmenu3" style="display: none">| LIEN SOCIÉTÉ 1  | <a href="#">LIEN SOCIÉTÉ 2</a> | LIEN SOCIÉTÉ 3 | LIEN SOCIÉTÉ 4 | LIEN SOCIÉTÉ 5 | </div>
          <div class="ssmenu" id="ssmenu4" style="display: none">| LIEN SPORT 1  | LIEN SPORT 2 | LIEN SPORT 3 | LIEN SPORT 4 | LIEN SPORT 5 | </div>
          <div class="ssmenu" id="ssmenu5" style="display: none">| LIEN GRIN DE CULTURE 1  | LIEN GRIN DE CULTURE 2 | LIEN GRIN DE CULTURE 3 |  </div>
          <div class="ssmenu" id="ssmenu6" style="display: none">| LIEN SANTÉ 1  | LIEN SANTÉ 2 | LIEN SANTÉ 3 | LIEN SANTÉ 4 | LIEN SANTÉ 5 | </div>
          <div class="ssmenu" id="ssmenu7" style="display: none">| LIEN DÉBATS &amp; OPINIONS 1  | LIEN DÉBATS &amp; OPINIONS 2 | LIEN DÉBATS &amp; OPINIONS 3 |  </div>
          <div class="ssmenu" id="ssmenu8" style="display: none">| LIEN PERSONNALITÉS 1  | LIEN PERSONNALITÉS 2 | LIEN PERSONNALITÉS 3 | LIEN PERSONNALITÉS 4 | </div>
          <div class="ssmenu" id="ssmenu9" style="display: none">| LIEN DOSSIERS 1  | LIEN DOSSIERS 2 | LIEN DOSSIERS 3 | LIEN DOSSIERS 4 | </div>
          <div class="ssmenu" id="ssmenu10" style="display: none">| LIEN L'INTERVIEW 1  | LIEN L'INTERVIEW 2 | LIEN L'INTERVIEW 3 | LIEN L'INTERVIEW 4 | LIEN L'INTERVIEW 5 |</div> 
          <div class="ssmenuhome" id="ssmenu11" style="display: none"></div>
 
          </div>

bon je sais c'est un peu le bordel...mais c'/est en speed...
si quelqu'un peut m'aider?
guillaume

**innommables** · 23/03/2009, 17h02

je vais essayer d'etre plus simple
j'ai un menu avec
menu1 menu2 menu 3 menu 4 .... (sur une ligne)
et plusieurs sous menus
sousmenu1pourmenu1 sousmenu2pourmenu1....
sousmenu1pourmenu2 sousmenu2pourmenu3.... (sur une ligne)

Je souhaite
-faire apparaitre et disparaitre les sous menus en fonction de mon action onmouseover sur mon menu
-faire changer la couleur fond de menu1 (par exemple)
qu'ils restent ainsi et il changent seulement quand je vais sur un autre menu (menu2 par exemple)
voila voilou

**razbitume** · 23/03/2009, 23h10

Le plus simple :

Code :

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

1
2
3
function changeCouleurMenu(menu, classe) {
document.getElementById(menu).className = classe;
}

css

Code :

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

1
2
.rouge { background-color: #f00; }
.noir { background-color: #000; }

Mais il faut que tu insères ta fonction changeCouleur partout où c'est nécessaire, en spécifiant le bon menu et la bonne classe CSS à chaque fois. Tu l'as déjà fait pour tes toggleDiv, et si ton menu n'est pas amené à changer par la suite, ça peut aller...

Le mieux serait d'automatiser en faisant des boucles sur tous tes éléments, mais d'abord il faudrait un code html un peu plus clair, parce que là c le bordel

**innommables** · 26/03/2009, 20h12

merci pour la reponse
j'ai trouve mon bonheur en faisant

Code :

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

1
2
3
4
5
6
7
8
function toggleCol(id)
{
	for (x=1; x<=11; x++)
	{
		document.getElementById("nomobjet"+x).style.backgroundColor = '#AE5600';
	}	
	document.getElementById(id).style.backgroundColor = '#4874A0';	
}

show hide div et changement couleur

JavaScript

Discussions similaires

Partager

Partager