Menu déroulant HTML, CSS et Javascript

Web Development Knowledge Base

HOME | TOP 20 | WRITE AN ARTICLE |

Sections :

CSS (7)
Flash & AS (2)
HTML (19)
Java (5)
JavaScript (52)
Perl (0)
PHP (36)
Protocols (1)
Python (0)
Ruby (0)
SQL (4)
Linux (13)
Misc (9)

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 7922 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>

</body>
</html>

Exemple d'utilisation sur http://mieux-batir.com/

Nos partenaires : iPhone 8 Cases & Protection