Sections :
RSS Feed
You too, please publish your useful code snippets in any programming language : write an article !
Plateforme d'envoi de gros fichiers en ligne
Dépannage site web
Blog infogérance
Hébergement e-mail
|
Aurelie Dufour - - 19/03/2008 - vue 7890 fois
Menu déroulant HTML, CSS et Javascript
Ce menu déroulant affiche les sous-menus au passage du curseur sur les titres du menu.
Un timer gère le temps à partir duquel les sous-menus disparaissent quand le curseur n'est plus sur les sous-menus.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu déroulant CSS + Javascript</title>
<style type="text/css">
#menu dl, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font: 0.9em Arial, Trebuchet MS,Verdana, Helvetica sans-serif;
}
#menu_horizontal dl {
float: left;
width: 105px; /*largeur de chaque bouton */
margin: 0 2px;
}
#menu_horizontal dt {
font: 0.8em Arial, Trebuchet MS,Verdana, Helvetica sans-serif;
cursor: pointer;
text-align: center;
background-color: #FEBA6A; /*orange brique */
}
#menu_horizontal dd {
border: 1px solid #FEBA6A;/*orange brique */
display: none;
}
#menu_horizontal li {
text-align: left;
background-color : #fff7d4; /*pour avoir un fond orange trèèèèès pâle*/
font: 0.9em Arial, Trebuchet MS, Verdana, Helvetica sans-serif;
}
#menu_horizontal dt{
color: #ffffff;/*marron*/
text-decoration: none;
border: 1px solid #FEBA6A;/*bord orange brique */
display: block;
height: 100%;
font-weight: bolder;
}
#menu_horizontal li a{
color: #DA4C02;/*marron*/
text-decoration: none;
border-top: 0.5px solid #FEBA6A; /*bord haut orange brique*/
border-bottom: 0.5px solid #FEBA6A; /*bord bas orange brique */
display: block;
height: 100%;
}
#menu_horizontal li a:hover, #menu_horizontal dt a:hover {
background-color: #F8E396; /*orange pale*/
font-weight: bolder;
}
</style>
<script type="text/javascript">
var timer = null;
var objOut = null;
function mouseOut(obj)
{
var elmt = document.getElementById(obj.id+"Item");
elmt.style.display = "none";
document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
//instruction a placer a la fin de la fonction
timer = null;
}
function fout(obj)
{
objOut = obj;
if (timer==null)
{
//temps en millisecondes à partir duquel le sous-menu disparaît
//quand le curseur n'est plus sur les sous-menus
timer = setTimeout("mouseOut(objOut)","1000");
}
}
function fover(obj)
{
var elmt;
clearTimeout(timer);
timer = null;
elmt = document.getElementById(obj.id+"Item");
elmt.style.display = "block";
document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
if (objOut!=obj && objOut!=null)
{
mouseOut(objOut);
}
}
</script>
</head>
<body>
<div id="menu_horizontal">
<dl class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
<dt class="titreMenu itemOut" id="Menu1Titre">Menu 1</dt>
<dd class="contenuMenu" id="Menu1Item">
<ul>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 1</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 2</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 3</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 4</a></li>
</ul>
</dd>
</dl>
<dl class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
<dt class="titreMenu itemOut" id="Menu2Titre">Menu 2</dt>
<dd class="contenuMenu" id="Menu2Item">
<ul>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item a</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item b</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item c</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item d</a></li>
</ul>
</dd>
</dl>
<dl class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
<dt class="titreMenu itemOut" id="Menu3Titre">Menu 3</dt>
<dd class="contenuMenu" id="Menu3Item">
<ul>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 1</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 2</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 3</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 4</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 5</a></li>
</ul>
</dd>
</dl>
<dl class="menu" id="Menu4" onmouseout="fout(this)" onmouseover="fover(this)">
<dt class="titreMenu itemOut" id="Menu4Titre">Menu 4</dt>
<dd class="contenuMenu" id="Menu4Item">
<ul>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item a</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item b</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item c</a></li>
</ul>
</dd>
</dl>
<dl class="menu" id="Menu5" onmouseout="fout(this)" onmouseover="fover(this)">
<dt class="titreMenu itemOut" id="Menu5Titre">Menu 5</dt>
<dd class="contenuMenu" id="Menu5Item">
<ul>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 1</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 2</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 3</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 4</a></li>
<li class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Item 5</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
Exemple d'utilisation sur http://mieux-batir.com/
|