DevKB
Web Development Knowledge Base
HOME | TOP 20 | WRITE AN ARTICLE |
Sections :



RSS RSS Feed

You too, please publish your useful code snippets in any programming language :
write an article !


Valid HTML 4.0 Transitional

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 3631 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/

 




Write a comment :
Your name :     E-mail (optional) :

AntiSpam : what animal is visible on this picture ? :

Nos partenaires : iPhone 8 Cases & Protection