javascript css menu deroulant timeout

**keub51** · 10/05/2007, 09h29

bonjour !

j'ai un menu déroulant en css/javascript. j'aimerai rajouter une focntionnalité " time out " avec laquel apres un certain nombre de secondes le menu disparait ...

je ne vois pas trop copmment faire ca ...

ma premiere idée été de faire un time out de zero avec onmouseout mais je n'arrive aps a le placer correctement dans le code pour produire l'effet voulu ...

voici mon code :

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
<html>
<head>
<title>Contacter Nordtech grossiste informatique</title>
<link rel="stylesheet" media="screen" type="text/css" title="style_nordtech" href="style.css" />
<meta name="description" content="nordtech sarl comment nous contacter. Contact. Formulaire client.">
<meta name="keywords" content="nordtech,nortech,grossiste,informatique,contact,contacts,client,clients,professionels">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="author" content="Nordtech sarl">
<meta http-equiv="reply-to" content="philippe.depreter@nordtech.info">
<meta name="language" content="FR,EN,NL">
<meta name="copyright" content="nordtech sarl">
<meta name="revisit-after" content="15 days">
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu_deroulant'+i)) {document.getElementById('smenu_deroulant'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
function cache(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu_deroulant'+i)) {document.getElementById('smenu_deroulant'+i).style.display='none';}
	}
}
</script>
</head>
<body>
<div id="ban">
</div>
<div id="bar">
	<div id="menu_deroulant">
	<dl>			
		<dt  onmouseover="javascript:montre('smenu_deroulant1');" >Nordtech</dt>
			<dd id="smenu_deroulant1">
				<ul >
					<li><a href="#" title="Nordtech Activitées">Activitées</a></li>
					<li><a href="#" title="Nordtech Produits">Produits</a></li>
					<li><a href="#" title="Nordtech Adresse">Adresse</a></li>
					<li><a href="#" title="Nordtech Juridique">F. Juridique</a></li>
				</ul>
 
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant2');">Fournisseurs</dt>
			<dd id="smenu_deroulant2">
				<ul>
					<li><a href="#" title="Nordtech Selection">Sélection</a></li>
					<li><a href="#" title="Nordtech Marque">Marque</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant3');">Clients</dt>
 
			<dd id="smenu_deroulant3">
 
				<ul>
					<li><a href="#" title="Nordtech Qui">Qui?</a></li>
					<li><a href="#" title="Nordtech Contact">Contact</a></li>
					<li><a href="#" title="Nordtech Client">Formulaire Client</a></li>
					<li><a href="#" title="Nordtech Entreprise">Pack créateur d'entreprise</a></li>
					<li><a href="#" title="Nordtech Délai">Délai</a></li>					
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant4');">Ce site</dt>
			<dd id="smenu_deroulant4">
				<ul>
					<li><a href="#" title="Nordtech Pourquoi">Pourquoi ?</a></li>
					<li><a href="#" title="Nordtech Newsletter">Newsletter</a></li>
				</ul>
			</dd>
	</dl>	
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant5');">Opportunité</dt>
			<dd id="smenu_deroulant5">
				<ul>
 
					<li><a href="#" title="Nordtech Profil">Profil</a></li>
					<li><a href="#" title="Nordtech Candidature">Candidature</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant6');">Webmaster</dt>
			<dd id="smenu_deroulant6">
				<ul>
					<li><a href="#" title="Nordtech Partenariat">Partenariat</a></li>
				</ul>
			</dd>
	</dl>	
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant7');">Autres</dt>
			<dd id="smenu_deroulant7">
				<ul>
					<li><a href="#" title="Nordtech Presse">La presse</a></li>
					<li><a href="#" title="Nordtech Liens constructeurs">Liens constructeurs</a></li>
				</ul>
			</dd>
	</dl>
 
 
	</div>
</div>
<div id="menu">
        CAMERA de Sécurité
    <br/><br/>UPS UNITEK
    <br/><br/>RESEAU LINKSYS
    <br/><br/>ANTIVIRUS / ANTISPYWARE
    <br/><br/>ALIMENTATION et BOITIER EXTERNE
    <br/><br/>KIT GPS
    <br/><br/>TNT
    <br/><br/>SPECIAL
    <br/><br/>MEMOIRE MDT
    <br/><br/>CLAVIERS - SOURIS<br/>
        MICROSOFT<br/>
        LOGITECH<br/>
        NORTEK
    <br/><br/>BAREBONES ASUS
    <br/><br/>PORTABLES ASUS
    <br/><br/>BOITIERS ASUS, FOXCONN, HEDEN, MAXINPOWER
    <br/><br/>MONITEURS - ECRANS
      PROVIEW
      LG GOLDSTAR
    <br/><br/>Hauts Parleurs JAZZ, ALTEC LANSING et NORTEK
    <br/><br/>Catalogue Produits .Pdf
 
</div>
<div id="contenu">
				<p>Nordtech est un grossiste informatique n'appartenant &agrave; aucun groupe, 
                autonome &agrave; 100%. Cr&eacute;&eacute; par un membre actif 
                du milieu professionnel informatique depuis longue date et fort 
                de ses nombreuses exp&eacute;riences, Nordtech vous propose une 
                solution alternative int&eacute;ressante et se d&eacute;marque 
                des autres grossistes. Nordtech est grossiste et importateur de 
                mat&eacute;riel informatique. Nordtech en tant que grossiste s'adresse 
                aux revendeurs, retailers, sp&eacute;cialistes btob et de fa&ccedil;on 
                g&eacute;n&eacute;rale aux professionels de l'informatique. Nortech 
                en tant qu'importateur s'adresse aux grossistes r&eacute;gionaux 
                en leur proposant une gamme de produits et une exclusivit&eacute; 
                teritoriale de distribution. Le but de ce site est de vous fournir 
                les informations client / fournisseur n&eacute;cessaires &agrave; 
                comprendre qui nous sommes et ce qu'un grossiste de mat&eacute;riel 
                informatique tel que Nordtech peut vous proposer.
				</p>
</div>
</body>
</html>

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
body
{
background-image : url("images/fond.jpg");
background-repeat: y-repeat;
margin: auto;
color:white;
}
#ban
{
background-image : url("images/head.jpg");
width : 1280px;
height : 108px;
}
#bar
{
padding : 5px;
background-image : url("images/bar.jpg");
width : 1280px;
height : 32px;
margin-bottom : 10px;
}
#menu
{
padding : 10px;
margin-left:50px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
float: left; 
width: 21em;
height : 509px;
background-image : url("images/fond2.jpg");
background-repeat : repeat-y;
border : 1px solid black;
 
}
#contenu
{
margin-right:50px;
float : right;
font-family : Verdana, Arial, Helvetica, sans-serif;
width: 810px;
height : 509px;
background-image : url("images/fond2.jpg");
background-repeat : repeat-y;
text-align: justify ;
border : 1px solid black;
padding : 30px;
margin-bottom : 10px;
}
p 
{
text-indent: 30px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu_deroulant {
position: absolute;
left: 0;
width: 100%;
}
#menu_deroulant dl {
float: left;
width: 10em;
position: relative;
margin: 0 2px;
}
#menu_deroulant dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu_deroulant dd {
background-image: url("images/fond.jpg");
position: absolute;
width:100%;
border : 1px solid black;
}
#menu_deroulant li {
text-align: center;
}
#menu_deroulant li a, #menu_deroulant dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu_deroulant li a:hover, #menu_deroulant dt a:hover {
background: black;
}
a {
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
color: #222;
font-size : 11px;
}

**Auteur** · 10/05/2007, 18h47

Envoyé par keub51

bonjour !

j'ai un menu déroulant en css/javascript. j'aimerai rajouter une focntionnalité " time out " avec laquel apres un certain nombre de secondes le menu disparait ...

je ne vois pas trop copmment faire ca ...

en regardant dans le forum "contribuez" de Javascript

Menu déroulant horizontal

javascript css menu deroulant timeout

JavaScript

Discussions similaires

Partager

Partager