JS: un menu deroulant qui appel une page HTML
Résolu/Fermé
Bonjour,
Je suppose etre au bon endroit. J'aimerais avoir sur ma page web un menu qui s affiche comme ici http://www.yebhi.com/index.aspx?15
C'est du JS et CSS, Lorsque vous pointer votre souris sur les menus shoes, Clothing, bag ou autres. un sous menu mais tres grand bien fait apparaît avec plusieurs liens. Ce suppose que cela fait appel a une page html une fois le mouse est over et se cahe des que le mouse est out.
Je désire quelques conseil pour arriver a réaliser un truc similaire. Merci d'avance.
Grogro
Je suppose etre au bon endroit. J'aimerais avoir sur ma page web un menu qui s affiche comme ici http://www.yebhi.com/index.aspx?15
C'est du JS et CSS, Lorsque vous pointer votre souris sur les menus shoes, Clothing, bag ou autres. un sous menu mais tres grand bien fait apparaît avec plusieurs liens. Ce suppose que cela fait appel a une page html une fois le mouse est over et se cahe des que le mouse est out.
Je désire quelques conseil pour arriver a réaliser un truc similaire. Merci d'avance.
Grogro
A voir également:
- Menu déroulant html javascript
- Arrondi js ✓ - Forum Windows
- Arrondir js - Forum Webmastering
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Photoshop
- Pixlr - Forum Graphisme
- Reproduction d'un dessin - Forum Graphisme
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>
