Salut,
Si on externalise toutes les instructions JS dans un fichier script.js, qu'on rajoute la méthode de chargement rapide de Dean Edwards, qu'on modifie le menu de manière à ce que JS désactivé tous les sous-menus soient apparents et qu'on ajoute la navigation clavier, ça donne ceci :
page.html
<!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>Menu horizontal déroulant sur une ligne en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" media="screen, projection" href="menu.css" />
</head>
<body>
<div id="menu">
<dl>
<dt><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-menu 1.1</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-menu 2.1</a></li>
<li><a href="#">Sous-menu 2.2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Menu 3</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-menu 3.1</a></li>
<li><a href="#">Sous-menu 3.2</a></li>
<li><a href="#">Sous-menu 3.3</a></li>
<li><a href="#">Sous-menu 3.4</a></li>
<li><a href="#">Sous-menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<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>
</ul>
</dd>
</dl>
</div>
<div class="mentions">Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a></div>
</body>
</html>
menu.css
/* CSS issu des tutoriels http://css.alsacreations.com */
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
#menu {
position : absolute;
left: 50px;
top: 20px;
}
#menu dl {
float: left;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #000;
background: #fff;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
position: relative;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}
.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}
.cache {
display: none;
}
.montre {
display: block;
}
menu.js
function hideSsMenus()
{
var oMenu, aSsMenus, iSsMenu;
oMenu = document.getElementById('menu');
aSsMenus = oMenu.getElementsByTagName('dd');
iSsMenu = aSsMenus.length;
do aSsMenus[--iSsMenu].style.position = 'absolute';
while(iSsMenu > 0);
iSsMenu = aSsMenus.length;
do aSsMenus[--iSsMenu].className = 'cache';
while(iSsMenu > 1);
}
function addBehaviour()
{
var oMenu, aDts, iDt;
oMenu = document.getElementById('menu');
aDts = oMenu.getElementsByTagName('dt');
iDt = aDts.length;
do
{
aDts[--iDt].getElementsByTagName('a')[0].onmouseover = displaySsMenu;
aDts[iDt].getElementsByTagName('a')[0].onfocus = displaySsMenu;
}
while(iDt > 0);
}
function displaySsMenu()
{
var oMenu, aSsMenus, iSsMenu, oCurrent;
oMenu = document.getElementById('menu');
aSsMenus = oMenu.getElementsByTagName('dd');
iSsMenu = aSsMenus.length;
oCurrent = this.parentNode.parentNode.getElementsByTagName('dd')[0];
do if(aSsMenus[--iSsMenu] != oCurrent)
aSsMenus[iSsMenu].className = 'cache';
else
aSsMenus[iSsMenu].className = 'montre';
while(iSsMenu > 0);
}
// Dean Edwards/Matthias Miller/John Resig
function init() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
if (_timer) clearInterval(_timer);
// do stuff
hideSsMenus();
addBehaviour();
};
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = init;
Ca doit faire ce que tu veux...
Néanmoins, la structure du menu pourrait être améliorée car la liste descriptive n'est pas des plus adaptées à la situation (ça impliquerait de tout modifier) et le code JS pourrait encore être amélioré.
Bref, je l'ai fait un peu vite mais en attendant mieux, c'est déjà plus accessible.
