11548 sujets

JavaScript, DOM et API Web HTML5

Menu horizontal déroulant

Je serais toi je referais le menu en <ul> <li> les liste de définition çà apporte rien de plus, je dirais même que çà enlève la possibilité de faire le menu en :hover donc sans Javascript.
Modifié par CNeo (03 Jan 2007 - 16:54)
vincentH a écrit :
je crois que :hover ne fonctionne pas sous IE, non ??
Oui. Mais un menu en <ul> <li> permet de faire un menu en hover qui fonctionne chez les personnes ayant firefox ou tout autre navigateur récent quand js est désactivé.

Un code ( qui date un peu mais qui fonctionne encore ) pour te montrer un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un menu horizontal déroulant (&nbsp;survol&nbsp;)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {color: #000; font: 0.8em Verdana, Arial, sans-serif; background: #f0ffe0;}
ul, li {list-style-type: none; margin:0; padding:0;}
.l1 li {float: left;}
.l1 a {width: 140px; margin: 0 5px 0 0; color: #000; background: #c1ff80; border: 1px solid #00b440; padding: 2px 0; display: block; text-align: center; text-decoration: none;}
.l1 a:hover {font-weight: bold;}
.l2 {width: 140px; margin: -1px 0 0 0; border: 1px solid #00b440; background: #fff; display: none; position: absolute;}
.l2 li {float: none;}
.l2 a {border: none; margin: 0 0 0 -18px; background: #fff;}
body > ul.l1 ul.l2 a {margin:0;}
.l2 a:hover {background: #c1ff80; font-weight: normal;}
ul.l1 li:hover ul.l2 {display: block;}
#corps {border: 1px dashed #f00; clear: both; height: 500px;}
-->
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
window.onload=montre;
function montre(id) {
  for(var i = 1; i<=20; i++){
    if (document.getElementById('sm'+i)) {document.getElementById('sm'+i).style.display='none';}
  }
  document.getElementById('sm'+id).style.display='block';
}
</script>
<![endif]-->
</head>
<body>

<ul class="l1">
 <li><a href="#" onmouseover="montre()">Menu 1</a></li>
 <li><a href="#" onmouseover="montre(2)">Menu 2</a>
  <ul class="l2" id="sm2">
   <li><a href="#">Sous-menu 2.1</a></li>
   <li><a href="#">Sous-menu 2.2</a></li>
   <li><a href="#">Sous-menu 2.3</a></li>
   <li><a href="#">Sous-menu 2.4</a></li>
  </ul>
 </li>
 <li><a href="#" onmouseover="montre()">Menu 3</a></li>
 <li><a href="#" onmouseover="montre(4)">Menu 4</a>
  <ul class="l2" id="sm4">
   <li><a href="#">Sous-menu 4.1</a></li>
   <li><a href="#">Sous-menu 4.2</a></li>
   <li><a href="#">Sous-menu 4.3</a></li>
   <li><a href="#">Sous-menu 4.4</a></li>
   <li><a href="#">Sous-menu 4.5</a></li>
   <li><a href="#">Sous-menu 4.6</a></li>
   <li><a href="#">Sous-menu 4.7</a></li>
  </ul>
 </li>
 <li><a href="#" onmouseover="montre()">Menu 5</a></li>
</ul>

<!--[if lt IE 7]><div id="corps" onmouseover="montre()">Sert à effacer le sous-menu.</div><![endif]-->

</body>
</html>


Fait pas attention au div cacher pour IE6.
Modifié par CNeo (03 Jan 2007 - 17:38)
vincentH a écrit :
Je vais essayer ce code, merci.
Je te préviens çà ressemble pas vraiment à ce que tu recherche même s'il y a juste les css à changer.

Et puis ce code ce fait vieux il y a peut-être des améliorations à faire au niveau de l'accessibilité.
Modifié par CNeo (03 Jan 2007 - 18:40)
Sujet clos
Aller à