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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
behavior: url("csshover3.htc");
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu ul.niveau2 {left: 0px; top: 22px;}
#monmenu ul.niveau3 {left: 144px; top: -1px;}
#monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#monmenu li {width: 144px;}
</style>
<![endif]-->
<meta name="keywords"
content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
<meta name="description"
content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
<title>Exemple de menu hiérarchique en CSS</title>
</head>
<body>
<div id="monmenu">
<ul class="niveau1">
<li> Menu
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
<img alt=" " src="illustrations/ menu-deroulant/ bebe.gif"
border="none">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
<img alt=" " src="illustrations/ menu-deroulant/ note.gif"
border="none">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
<img alt=" "
src="illustrations/ menu-deroulant/ serveuse.gif"
border="none"> Draguer la serveuse
</a>
</li>
</ul>
</li>
<li>
<a href= "http://www.rankspirit.com">
<img alt=" "
src="illustrations/ menu-deroulant/ entree.gif"
border="none">
Entrée
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
<img alt=" "
src="illustrations/ menu-deroulant/ plat.gif"
border="none">
Plat
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
<img alt=" "
src="illustrations/ menu-deroulant/ dessert.gif"
border="none">
Dessert
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
<img alt=" "
src="illustrations/ menu-deroulant/ cafe.gif"
border="none"> Café
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
Partager