menu css et javascript pour ie

**vava1978** · 09/08/2007, 19h54

Bonjour à tous,

d'avance merci de me lire, j'ai récupérer un css pour un menu horyzontale à plusieurs niveau, celui ci est munit d'un javascript pour ie
voici ce que je met dans mon fichier js qui est au même niveau que ma page avec le menu voila ce que je met dedans

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// JavaScript DocumentnavHover = function() {
	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
	for (var i=0; i<lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

voici ce que contient ma page html

dans le header

Code :

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

1
2
3
4
5
6
7
<!--
@import"dhtml-horiz.css";
-->
 
<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->

dans le body

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
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
<div id="contenu">
 
<ul id="navmenu">
  <li><a href="#">Blog</a></li>
 
  <li><a href="#">Work +</a>
    <ul>
      <li><a href="#">Websites +</a>
        <ul>
          <li><a href="#">qrayg</a></li>
          <li><a href="#">qArcade</a></li>
          <li><a href="#">qLoM</a></li>
 
          <li><a href="#">qDT</a></li>
        </ul>
      </li>
      <li><a href="#">Pen and Ink</a></li>
      <li><a href="#">Free Interfaces</a></li>
    </ul>
  </li>
 
  <li><a href="#">Learn +</a>
    <ul>
      <li><a href="#">Fireworks +</a>
        <ul>
          <li><a href="#">aquaButton</a></li>
          <li><a href="#">aquaButton2</a></li>
          <li><a href="#">waterDrop</a></li>
 
          <li><a href="#">lightFX</a></li>
          <li><a href="#">lightFX2</a></li>
        </ul>
      </li>
      <li><a href="#">CSS +</a>
        <ul>
          <li><a href="#">footerStick</a></li>
 
          <li><a href="#">spriteNav</a></li>
          <li><a href="#">@import</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Info</a></li>
 
  <li><a href="#">Contact</a></li>
</ul>
 
</div>

et enfin dans ma feuille de style qui elle est nommée index.css et est stocké dans un répertoire css

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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
 
body {
	background: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #8B985F;
}
#header {
	width: 800px;
	height: 308px;
	margin: 0 auto;
	padding: 0 0px 0px 0px;
}
 
#nav a {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: right;
}
#nav{
	padding-left : 10px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: right;
}
 
#flash{
	background: #2f2f2f url(../images/header.gif) no-repeat center top;
	width: 800px;
	height: 280px;
	margin: 0 auto;
	padding: 0px;
	}
	#contenu{
	width: 800px;
	height: 280px;
	padding: 0px 0px  0px;
	margin: 0 auto;
	background: #FFFFFF
}
 
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}
 
ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}
 
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}
 
ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
 
ul#navmenu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
 
/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
 
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}
 
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}
 
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}
 
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}
 
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}
 
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}
 
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}
 
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}
 
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}
 
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}
 
 
#footer {
	width: 800px;
	height: 45px;
	margin: 0 auto;
	padding: 0 0px 35px 2px;
	background: #2f2f2f url(../images/footer.gif) no-repeat center top;
}

le probléme c'est sous ie, mon menu ne se deplie pas.... et la je sature

j en peux plus...

si vous pouviez me solutionner se serait formidable vraiment formidable

merci d'avance

**LexWizard** · 10/08/2007, 14h21

Vala, chez moi ça marche :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function navHover()
{
  var lis = document.getElementById("navmenu").getElementsByTagName("LI");
  for (var i=0; i<lis.length; i++)
  {
    lis[i].onmouseover=function(){ this.className = "iehover";};
    lis[i].onmouseout=function(){this.className=this.className.replace(new RegExp("iehover\\b"), "")};
  }
}
if (window.attachEvent) window.attachEvent("onload", navHover);

Bonne continuation

**ghyosmik** · 19/09/2008, 12h59

Bonjour,

je veux rendre mon menu horizontal un peu animé, au passage du curseur, y aun sous menu ( de forme horizontal qui s'affiche)
Bon permettez moi de vous donner un exemple de site que je veux avoir comme résulttat!
www.samsung.com

Mais je dibute en javascript et je sais pas comment le coder!!

Pour le moment, mon menu s'affiche en cliquant sur l'anglet et il est vertical! et j'ai pas pu définir le jeu de passage du curseur....

Voilà, voilà! merci d'avance pour votre aide,
cdlt

menu css et javascript pour ie

JavaScript

Discussions similaires

Partager

Partager