1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu deroulant</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
<!--
/******** Feuille de styles du menu ************/
.menu{
float: left;
margin: 2px;
padding: 2px;
}
.titreMenu, .contenuMenu, .lienMenu{
color: #000000;
}
.titreMenu, .contenuMenu{
border: 2px outset #AAAAAA;
width: 120px;
text-align: center;
margin: 0px;
padding: 0px;
}
.contenuMenu{
display: none;
position: absolute;
background-color: #FFFFFF;
}
.menuOverflow{
overflow: auto;
height: 200px;
}
.itemOver{
background-color: #AAAAFF
}
.itemOut{
background-color: #FFFFFF;
}
.lienMenu{
text-decoration: none;
}
.crlf{
clear: both;
/*visibility: hidden;*/
}
/******** Fin de la feuille de styles du menu ************/
//-->
</style>
<script type="text/javascript">
<!--
/******** Debut du script du menu ************/
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)
{
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);
}
}
/******** Fin du script du menu ************/
//-->
</script>
</head>
<body>
<!-- Debut code HTML du menu -->
<!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu1Titre">Menu 1</div>
<div class="contenuMenu" id="Menu1Item">
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 11</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 12</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 13</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 14</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 15</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 16</a></div>
</div>
</div>
<!-- Fin Menu 1 -->
<!-- Debut Menu 2 -->
<div class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu2Titre">Menu 2</div>
<div class="contenuMenu" id="Menu2Item">
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 21</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 22</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 23</a></div>
</div>
</div>
<!-- Fin Menu 2 -->
<!-- Debut Menu 3 -->
<div class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu3Titre">Menu 3</div>
<div class="contenuMenu menuOverflow" id="Menu3Item">
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 30</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 31</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 32</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 33</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 34</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 35</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 36</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 37</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 38</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 39</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3A</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3B</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3C</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3D</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3E</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3F</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 40</a></div>
</div>
</div>
<div><br /><br /></div>
<hr class="crlf" />
<!-- Fin code HTML du menu -->
<div>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</body>
</html> |
Partager