Note 2009 : il y a beaucoup mieux que le code du menu plus bas. N'ayant pas le temps de le mettre en page, merci de ne considérer que la partie PHP qui, à peu de chose près, reste viable (gestion on/off des menus).
Si vous souhaitez savoir comment est composée cette page, voyez la feuille de styles dev.ppan.net/webdev.css, ainsi que le code ci-dessous (squelette HTML). Testée sous Mozilla 1.0, Firefox 0.9.2 et Internet Explorer (version 6.0.2800.1106 !)
Loin d'entrer dans le débat digne des plus virulents (PC vs Mac, Linux vs Windows, etc.) il apparaît que les CSS v2 permet de s'affranchir de certaines contraintes, tout en s'adonnant à la recherche d'une compatibilité avec les différents navigateurs (IE, Mozilla, Netscape). Car si le HTML 4 est aujourd'hui bien digéré, la gestion des calques n'est pas toujours une mince affaire !
Cela dit, la mise en page par feuilles de style autorise un code plus aéré, plus léger, plus logique. Une façon directe de présenter l'information aux robots : par exemple le menu (donc les liens) n'est ici visible qu'en bas de page (positionnement absolu). Le spider commence son oeuvre sur le premier texte en vue et non une liste de liens et de titres trop courts et non descriptifs.
Aussi, la feuille de styles n'étant chargée qu'une fois (puisqu'ensuite mise en cache) on peut considérer que les CSS libèrent une partie de la bande passante. Vous trouverez d'autres arguments en faveur des styles sur la page cybercodeur.net www.cybercodeur.net/weblog/presentations/seybold/index.html (un peu extrême à mon goût mais plutôt drôle).
Ne jetez pas les tableaux pour autant ! Pourquoi se prendre la tête à présenter une série de données tabulées avec des calques, alors qu'un bon vieux <TABLE> le fait parfaitement ? Ne pas oublier que la notion de feuille de style s'applique fondamentalement à une présentation répétitive : devoir charger une [longue] feuille pour une seule page dotée d'un tableau un peu complexe est, à mon sens, stupide. Sans parler de certaines présentations avec des fonds un peu travaillés, hyper simples avec un mode tableau, super sioux avec les CSS... un mixage des deux est parfois salutaire*.
(*) comme pour mon www.netalbum.org avec une hauteur 100% impossible en CSS
Il utilise conjointement une feuille de styles et du javascript. Les menus "full CSS" fleurissant sur le net sont basés sur l'utilisation de la pseudo classe :hover et ne sont donc pas compatibles avec Internet Explorer (du moins à ce jour). Le menu ci-dessous est cliquable (voir aussi version verticale).
Une rubrique dont une des sous-rubriques a été sélectionnée reçoit l'identifiant sel (dont le style simpliste est modifiable à souhait). Une rubrique ou une sous-rubrique sélectionnée reçoit l'id actif et l'URL vide # (sans quoi onfocus/onblur ne fonctionnent pas). On aurait pu adopter bêtement une balise <SPAN> (donc le style : .menu2 span), mais les évènements onfocus/onblur ne sont pas compatibles avec cette balise, donc on se passerait de la navigation au clavier. Enfin, chaque dernière sous-rubrique reçoit l'évènement onblur="changestyle('nom','hidden')" où nom est l'id du DIV parent.
<div class="zoneMenu">
<div class="menu2" onmouseover="changestyle('sm1','visible'); changestyle('sm2','hidden')" onmouseout="changestyle('sm1','hidden')">
<a href="?id=1" onfocus="changestyle('sm1','visible')" >Rubrique</a>
<div id="sm1" class="smenu2" onmouseout="changestyle('sm1','hidden')">
<a href="?id=2">Rubrique1</a>
<a href="?id=3">Rubrique2</a>
<a href="?id=4" onblur="changestyle('sm1','hidden')">Rubrique3</a>
</div>
</div>
<!-- décalage du deuxième menu : 100px + 10px de marge -->
<div class="menu2" style="left:110px" onmouseover="changestyle('sm2','visible'); changestyle('sm1','hidden')" onmouseout="changestyle('sm2','hidden')">
<a href="?id=5" onfocus="changestyle('sm2','visible')" id="sel">Choix</a>
<div id="sm2" class="smenu2" onmouseout="changestyle('sm2','hidden')">
<a id="actif" href="#">Choix1</a>
<a href="?id=7" onblur="changestyle('sm2','hidden')">Choix2</a>
</div>
</div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Astrucs du web design : menu CSS</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="stylesmenu.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<script language=JavaScript type="text/javascript">
function MM_findObj(n, d) { //v4.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function changestyle(couche, style) {
if (!(layer = MM_findObj(couche))) return;
layer.style.visibility = style;
}
</script>
<div class="zoneMenu">
<div class="menu2" onmouseover="changestyle('sm1','visible'); changestyle('sm2','hidden')" onmouseout="changestyle('sm1','hidden')">
<? if($id == 1) { ?>
<a id="actif" href="#" onfocus="changestyle('sm1','visible')">Rubrique</a>
<? } else { ?>
<a href="?id=1" onfocus="changestyle('sm1','visible')" <? if($id > 1 && $id < 5) { echo "id=\"sel\""; } ?>>Rubrique</a>
<? } ?>
<div id="sm1" class="smenu2" onmouseout="changestyle('sm1','hidden')">
<? if($id == 2) { ?>
<a id="actif" href="#">Rubrique1</a>
<? } else { ?>
<a href="?id=2">Rubrique1</a>
<? } ?>
<? if($id == 3) { ?>
<a id="actif" href="#">Rubrique2</a>
<? } else { ?>
<a href="?id=3">Rubrique2</a>
<? } ?>
<? if($id == 4) { ?>
<a id="actif" href="#" onblur="changestyle('sm1','hidden')">Rubrique3</a>
<? } else { ?>
<a href="?id=4" onblur="changestyle('sm1','hidden')">Rubrique3</a>
<? } ?>
</div>
</div>
<!-- décalage du deuxième menu : 100px + 10px de marge -->
<div class="menu2" style="left:110px" onmouseover="changestyle('sm2','visible'); changestyle('sm1','hidden')" onmouseout="changestyle('sm2','hidden')">
<? if($id == 5) { ?>
<a id="actif" href="#" onfocus="changestyle('sm2','visible')">Choix</a>
<? } else { ?>
<a href="?id=5" onfocus="changestyle('sm2','visible')" <? if($id > 5 && $id < 8) { echo "id=\"sel\""; } ?>>Choix</a>
<? } ?>
<div id="sm2" class="smenu2" onmouseout="changestyle('sm2','hidden')">
<? if($id == 6) { ?>
<a id="actif" href="#">Choix1</a>
<? } else { ?>
<a href="?id=6">Choix1</a>
<? } ?>
<? if($id == 7) { ?>
<a id="actif" href="#" onblur="changestyle('sm2','hidden')">Choix2</a>
<? } else { ?>
<a href="?id=7" onblur="changestyle('sm2','hidden')">Choix2</a>
<? } ?>
</div>
</div>
</div>
</body>
</html>
http://dev.ppan.net