Salut,
Tu peux générer les liens via JS afin que l'utilisateur qui ne dispose pas de ce langage ne se retrouve pas avec des liens inutiles...
Personnellement, je procède ainsi :
->
http://koalnet.com/divers/menu-alsa-vertical/
XHTML
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Menu vertical Alsacréations (version alpha 0.000001) - koala64</title>
<link rel="stylesheet" type="text/css" href="styleMenu.css" media="screen, projection" />
<script type="text/javascript">//<![CDATA[
// Fonction qui doit être chargée en entête de page xhtml et
// qui élimine l'apparition subite des listes du menu
// au chargement de la page
var CacheRapide = function()
{
document.write('<'+'style type="text/css">');
document.write('@media screen, projection {');
document.write('ul li ul { display: none; }');
document.write('}');
document.write('<'+'/style>');
}
CacheRapide();
//]]></script>
<script type="text/javascript" src="scriptMenu.js"></script>
</head>
<body>
<!--
.oO° Navigation clavier °Oo.
Fx et IE -> shift+tab : lien précédent / tab : lien suivant
Opera -> a : lien précédent / q : lien suivant
-->
<div id="page">
<ul id="menus">
<li>menu1
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
</ul>
</li>
<li>menu2
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</li>
<li>menu3
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
<li><a href="#">lien5</a></li>
</ul>
</li>
<li>menu4
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
CSS
/*
Menu vertical Alsacréations (version alpha 0.000001) - koala64
*/
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
#page
{
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
#menus
{
padding: 0;
margin: 0;
}
#menus *
{
padding: 0;
margin: 0;
list-style-type: none;
}
#menus li
{
display: list-item;
width: 120px;
border: 1px solid #000;
margin-right: 2px;
margin-bottom: 10px;
font-size: .9em;
line-height: 1.3em;
text-align: center;
background-color: #EEE;
}
#menus li ul
{
border-top: 1px solid #000;
}
#menus li ul li
{
clear: both;
width: 120px;
border: 0;
margin: 0;
background-color: #EEE;
text-align: left;
}
#menus li a
{
text-decoration: none;
color: #000;
background-color: #CCC;
display: block;
cursor: pointer;
}
#menus li ul a
{
width: 120px;
height: 1.6em;
line-height: 1.6em;
text-indent: 10px;
background-color: #EEE;
cursor: pointer;
}
#menus li ul a:hover
{
background-color: #58F;
}
/* Classes nécessaires au code Javascript */
.Cache
{
display: none;
}
.Montre
{
display: list-item;
}
Javascript
/*
Menu vertical Alsacréations (version alpha 0.000001) - koala64
*/
var oO =
{
// Test de passage d'un argument
_Test:
function()
{
var iI = arguments.length - 1;
for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
return true;
},
// Ajout d'une action sur un événement
_Connect:
function(oElem, sEvType, fn, bCapture)
{
oElem.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = fn;
},
// Affichage des menus
_Montre:
function()
{
oO._Cache();
var oList = this.parentNode.getElementsByTagName('ul')[0];
oList.className = 'Montre';
this.onclick = oO._Cache;
return false;
},
// Masquage des menus
_Cache:
function()
{
var oMenus = document.getElementById('menus'),
oUl = oMenus.getElementsByTagName('ul'),
iI = oUl.length - 1;
for(iI; iI >= 0; iI--) oUl[iI].className = 'Cache';
this.onclick = oO._Montre;
return false;
},
// Initialisation du menu
_Menu:
function()
{
oO._Cache();
var oMenus = document.getElementById('menus'),
oItem = oMenus.getElementsByTagName('li'),
iI = oItem.length - 1;
for(iI; iI >= 0; iI--)
{
if(oItem[iI].parentNode.getAttribute('id') == 'menus')
{
var oA = document.createElement('a'),
sTxtLi = oItem[iI].firstChild.nodeValue,
oTxtA = document.createTextNode(sTxtLi);
oA.setAttribute('href', '#');
oA.appendChild(oTxtA);
oItem[iI].replaceChild(oA, oItem[iI].firstChild);
oA.onclick = oO._Montre;
}
}
}
};
// Test des méthodes du script et lancement si c'est bon...
oO._Test(document.getElementById, document.getElementsByTagName, document.createElement, document.createTextNode) ?
oO._Connect(window, 'load', oO._Menu, false):
false;
Modifié par koala64 (01 Nov 2006 - 11:25)
Cela dit, je vais regarder quand même... 
)
