JS: un menu deroulant qui appel une page HTML
Résolu/Fermé
A voir également:
- Menu déroulant html javascript
- Js/adware.agent.cr ✓ - Forum Virus
- Retour à la ligne js ✓ - Forum Javascript
- Js/agent.piv ✓ - Forum Virus
- Node js virus ✓ - Forum Virus
- Onclick js ✓ - Forum Javascript
2 réponses
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
Modifié par Atropa le 1/03/2012 à 06:23
Modifié par Atropa le 1/03/2012 à 06:23
c'est assez simple a faire et sans javascript !!
voilà un exemple :
voilà un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="content-language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Luminis</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.menuCont {
/* là tu place ton menu */
margin-top: 30px;
margin-left: 40px;
}
.menu {
float: left;
list-style: none;
position: relative;
}
.menu > li {
float: left;
}
.menu > li > span {
display: block;
line-height: 35px;
/* ici le style que tu veux l'important et de garder display block et de centrer le text en hauteur avec ligne-height */
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
}
.menu > li > .lastspan {
margin-right: 0px;
}
.contBlock {
display: none;
position: absolute;
left: 0px;
width: 100%;
}
.menu > li:hover > span{
/* ici le style que tu veux */
background-color: red;
}
.menu > li:hover > .contBlock {
display: block;
background-color: #ffffff;
}
.block {
border: 10px solid red;
padding: 10px;
/* ici le style que tu veux*/
}
.clearBoth {
clear: both;
/* pour ne pas être ennuyé par les floats */
}
</style>
</head>
<body style="background-color: white;">
<div class="menuCont">
<ul class="menu">
<li>
<span>catégorie1</span>
<div class="contBlock"><div class="block">ce que tu veux 1</div></div>
</li>
<li>
<span>catégorie2</span>
<div class="contBlock"><div class="block">ce que tu veux 2</div></div>
</li>
<li>
<span class="lastspan">catégorie3</span>
<div class="contBlock"><div class="block">ce que tu veux 3</div></div>
</li>
</ul>
</div>
<div class="clearBoth"></div>
<div>
le reste de ton site
</div>
</body>
</html>
