javascript css menu deroulant timeout
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:
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 à aucun groupe,
autonome à 100%. Créé par un membre actif
du milieu professionnel informatique depuis longue date et fort
de ses nombreuses expériences, Nordtech vous propose une
solution alternative intéressante et se démarque
des autres grossistes. Nordtech est grossiste et importateur de
matériel informatique. Nordtech en tant que grossiste s'adresse
aux revendeurs, retailers, spécialistes btob et de façon
générale aux professionels de l'informatique. Nortech
en tant qu'importateur s'adresse aux grossistes régionaux
en leur proposant une gamme de produits et une exclusivité
teritoriale de distribution. Le but de ce site est de vous fournir
les informations client / fournisseur nécessaires à
comprendre qui nous sommes et ce qu'un grossiste de matériel
informatique tel que Nordtech peut vous proposer.
</p>
</div>
</body>
</html> |
Code:
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;
} |