JS: un menu deroulant qui appel une page HTML
Résolu
Grogro
-
Grogro -
Grogro -
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 js
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
2 réponses
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>