Créer une Liste déroulante.

**ox@na** · 21/10/2006, 17h10

Bonjour à tous,

Comment obtient-on un menu déroulant en JavaScript? Puisse qq'un m'aider pour cette information.
Merci!!!!!

**Lerin** · 21/10/2006, 17h30

Tu peux essayer ça, sinon il y en a surement quelque part sur internet ou dans la FAQ.

SCRIPT:

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
 
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu.display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}
 
function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}

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
 
<BODY onload="setHover()">
 
<UL ID="menu">
  <li>
    <a href="#">Accueil</a>
  </li>
 
 
  <li>
    <a href="#">1</a>
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
  </li>
 
 
  <li>
    <a href="#">2</a>
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
  </li>
 
 <li>
    <a href="#">3</a>
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
  </li>
 </li>
</ul>  
</BODY>

STYLE:

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
<style type="text/css">
 
ul#menu li ul{
  display:none;
}
 
ul#menu li:hover>ul{
  display:block;
}
 
ul#menu{
  float:left;
}
 
ul#menu,
ul#menu ul{
  background:#FFFFFF;
  border:1px solid #0066CC;
 
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
}
 
ul#menu ul{
  position:absolute;
  top:-1px;
  left:148px;
}
 
ul#menu li{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}
 
ul#menu a{
  display:block;
  width:100%;
  color:#0066CC;
  text-decoration:none
}
 
ul#menu a:hover{
  background:#000066;
  color:#0066CC;
}
 
p{
  margin-left:170px;
}
 
 
.spanstyle {
	position:absolute;
	visibility:visible;
	top:-50px;
	font-size:12pt;
	font-family:comic sans ms;
      font-weight:bold;
	color:#0066FF;
}
 
</style>

**Auteur** · 21/10/2006, 22h59

bonjour,

ce script ne fonctionnera qu'avec Internet Explorer.

**ox@na** · 22/10/2006, 15h00

Je vous remercie beaucoups!
C'est genial ça marche!

Créer une Liste déroulante.

JavaScript

Discussions similaires

Partager

Partager