all html : Le portail des webmaster
La communauté ALL HTML c'est 59577 membres à ce jour dont 0 inscrits aujourd'hui et 15 depuis une semaine.
Article publié le lundi 10 juillet 2006 par koala64.
Cet article est classé dans les catégories « Javascript »
Menu déroulant fondé sur les langages xhtml, css et javascript permettant la navigation au clavier.
<!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 déroulant accessible</title>
<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="menu">
<dl>
<dt>Menu 1</dt>
<dd><ul>
<li><a href="./">Lien 1</a></li>
<li><a href="./">Lien 2</a></li>
<li><a href="./">Lien 3</a></li>
<li><a href="./">Lien 4</a></li>
</ul></dd>
</dl>
<dl>
<dt>Menu 2</dt>
<dd><ul>
<li><a href="./">Lien 5</a></li>
<li><a href="./">Lien 6</a></li>
<li><a href="./">Lien 7</a></li>
<li><a href="./">Lien 8</a></li>
<li><a href="./">Lien 9</a></li>
<li><a href="./">Lien 10</a></li>
</ul></dd>
</dl>
<dl>
<dt>Menu 3</dt>
<dd><ul>
<li><a href="./">Lien 11</a></li>
<li><a href="./">Lien 12</a></li>
<li><a href="./">Lien 13</a></li>
</ul></dd>
</dl>
<dl>
<dt>Menu 4</dt>
<dd><ul>
<li><a href="./">Lien 14</a></li>
<li><a href="./">Lien 15</a></li>
<li><a href="./">Lien 16</a></li>
<li><a href="./">Lien 17</a></li>
<li><a href="./">Lien 18</a></li>
<li><a href="./">Lien 19</a></li>
<li><a href="./">Lien 20</a></li>
</ul></dd>
</dl>
<script type="text/javascript">
<!--
//Utile pour ne pas voir les éléments dd apparaître au chargement de la page
var oDd=document.getElementsByTagName('dd'),i=oDd.length-1;for(i;i>=0;i=i-1)oDd[i].style.display='none';
//-->
</script>
</div>
</body>
</html>
*
{
padding: 0;
border: 0;
margin: 0;
}
body
{
font: 100% "Times New Roman", serif;
background-color: #444;
color: #FFF;
}
#menu
{
position: absolute;
top: 0;
margin: 40px;
}
#menu dl
{
margin: 0 2px;
float: left;
border: 1px solid #000;
width: 166px;
text-indent: 10px;
}
#menu dl dt
{
font-weight: bold;
font-size: .9em;
line-height: 1.3em;
background-color: #555;
color: #DDD;
}
#menu dl dd
{
border-top: 1px solid #000;
}
#menu dl dd ul
{
list-style-type: none;
border-top: 0;
line-height: 1.5em;
}
#menu dl dt a
{
background-color: #555;
color: #DDD;
text-decoration: none;
display: block;
width: 166px;
height: 1.3em;
cursor: default;
}
#menu dl dd ul li
{
font-weight: normal;
font-size: .7em;
line-height: 1.5em;
}
#menu dl dd ul li a
{
width: 166px;
height: 1.5em;
text-decoration: none;
display: block;
background-color: #FFF;
color: #000;
text-indent: 10px;
cursor: pointer;
}
#menu dl dd ul li a:hover,
#menu dl dd ul li a:focus
{
background: #DDD;
}
// Raccourci et création d'un objet
var d = document,
o = {};
// Définition des propriétés de l'objet
o.Menu =
{
// Chargement du menu
__Load__: function()
{
// On lance le test pour s'assurer du bon fonctionnement
o.Menu.__Test__();
},
// Test d'existence des méthodes et de la syntaxe xhtml
__Test__: function()
{
// Si l'une des méthodes du script n'est pas interprétée ou si le menu n'existe pas, on stoppe le script.
if ( !d.getElementById ||
!d.getElementsByTagName ||
!d.createElement ||
!d.createTextNode ||
!d.getElementById('menu') ||
!d.getElementById('menu').setAttribute ||
!d.getElementById('menu').replaceChild ||
!d.getElementById('menu').appendChild ||
!d.getElementById('menu').getElementsByTagName('dl') ) return false;
/*
----- Tests facultatifs et non exhaustifs de bon augure ^^ -----
----- Les codes contenus dans la zone suivante peuvent -----
----- être virés si vous êtes sûr de votre syntaxe xhtml. -----
*/
// Une fois le premier test effectué, on définit les variables nécessaires.
var iA, iB, iC, iD,
oMenu = d.getElementById('menu'),
oDl = oMenu.getElementsByTagName('dl');
// Pour chaque élément dl du tableau oDl,
for ( iA = oDl.length - 1; iA >= 0; iA-- )
{
// on récupère les éléments dt dans un tableau.
var oDt = oDl[iA].getElementsByTagName('dt');
// Si le tableau oDt est vide, on stoppe le script.
if ( !oDt ) return false;
}
// Pour chaque élément dl du tableau oDl,
for ( iA = oDl.length - 1; iA >= 0; iA-- )
{
// on récupère les éléments dd dans un tableau oDd.
var oDd = oDl[iA].getElementsByTagName('dd');
// Si le tableau oDd est vide, on stoppe le script.
if ( !oDd ) return false;
// sinon
else
{
// pour chaque élément dd du tableau oDd,
for ( iB = oDd.length - 1; iB >= 0; iB-- )
{
// on récupère les éléments ul dans un tableau oUl.
var oUl=oDd[iB].getElementsByTagName('ul');
// S'il n'y a pas d'élément ul, on stoppe le script.
if( !oUl ) return false;
// sinon
else
{
// pour chaque élément ul du tableau oUl,
for ( iC = oUl.length - 1; iC >= 0; iC-- )
{
// on récupère les éléments li dans un tableau oLi.
var oLi = oUl[iC].getElementsByTagName('li');
// S'il n'y a aucun objet oLi, on stoppe le script.
if( !oLi ) return false;
// sinon
else
{
// pour chaque élément li du tableau oLi,
for ( iD = oLi.length - 1; iD >= 0; iD-- )
{
// on récupère l'élément a dans un objet oA.
var oA = oLi[iD].getElementsByTagName('a')[0];
// S'il n'y a pas d'objet oA, on stoppe le script.
if( !oA ) return false;
}
}
}
}
}
}
}
/*
----- -----
----- Fin des tests facultatifs de bon augure ^^ -----
----- -----
*/
// Une fois le test effectué, on initialise le menu.
return o.Menu.__Init__();
},
// Méthode d'initialisation du menu
__Init__:function()
{
// On définit les variables nécessaires.
var iA,
oMenu = d.getElementById('menu'),
oDl = oMenu.getElementsByTagName('dl');
// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
o.Menu.__HideLists__();
// Pour chaque élément dl du tableau oDl,
for ( iA = oDl.length - 1; iA >= 0; iA-- )
{
// On récupère l'élément dt.
var oDt = oDl[iA].getElementsByTagName('dt')[0];
// On crée un élément dt et un élément a
var oNewDt = d.createElement('dt'),
oA = d.createElement('a'),
oTextA = d.createTextNode('');
// On définit les propriétés de l'objet oA
// (récupération du noeud texte de l'élément dt pour définir celui de l'élément a)
oA.setAttribute('href','#');
oTextA.data = oDt.firstChild.nodeValue;
// On constitue l'arbre DOM en remplaçant l'élément dt du code xhtml
// par celui qu'on vient de créer.
oA.appendChild(oTextA);
oNewDt.appendChild(oA);
oDl[iA].replaceChild(oNewDt,oDt);
// On définit des méthodes en fonction des actions de l'utilisateur.
oA.onclick = o.Menu.__Discard__;
oDl[iA].onmouseover = o.Menu.__MouseDisplay__;
oA.onfocus = o.Menu.__TabDisplay__;
oA.onkeypress = o.Menu.__TabDisplay__;
}
},
// Méthode d'affichage de l'élément dd lorsqu'on le survole.
__MouseDisplay__:function()
{
// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
o.Menu.__HideLists__();
// On récupère l'élément dd de l'élément dl qu'on survole dans un objet.
var oDd = this.getElementsByTagName('dd')[0];
// On affecte la propriété css "display: block;" à l'objet oDd (affichage)
oDd.style.display = 'block';
// On cache l'élément dd lorsqu'on ne survole plus l'élément dl.
this.onmouseout = o.Menu.__HideLists__;
},
// Méthode d'affichage de l'élément dd lorsqu'il prend le focus.
__TabDisplay__:function()
{
// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
o.Menu.__HideLists__();
// On récupère l'élément dd de l'élément dl qui a le focus dans un objet.
var oDd = this.parentNode.parentNode.getElementsByTagName('dd')[0];
// On affecte la propriété css "display: block;" à l'objet oDd (affichage)
oDd.style.display = 'block';
// On donne le focus au premier lien de l'élément dd traité.
oDd.getElementsByTagName('a')[0].focus();
},
// Méthode de masquage des éléments dd
__HideLists__:function()
{
// On définit les variables nécessaires.
var iA,
oDd = d.getElementById('menu').getElementsByTagName('dd');
// Pour chaque élément dd du tableau oDd,
for (iA = oDd.length - 1; iA >= 0; iA-- )
{
// On affecte la propriété css "display: none;" à l'objet oDd (masquage)
oDd[iA].style.display = 'none';
}
},
// Fonction d'annulation
__Discard__:function()
{
// On annule l'action.
return false;
}
};
// Une fois que le document est chargé en mémoire, on charge le script.
window.onload=o.Menu.__Load__;
Commentaire publié le mardi 18 juillet 2006 à 02 h 35 par angecolonna Commentaire publié le mardi 18 juillet 2006 à 07 h 59 par koala64 
Commentaire publié le mercredi 19 juillet 2006 à 02 h 04 par nizouille Commentaire publié le mercredi 19 juillet 2006 à 02 h 25 par koala64 Commentaire publié le mercredi 19 juillet 2006 à 02 h 47 par nizouille Commentaire publié le mercredi 19 juillet 2006 à 07 h 55 par koala64 Commentaire publié le mercredi 19 juillet 2006 à 09 h 14 par nizouille Commentaire publié le dimanche 23 juillet 2006 à 12 h 49 par koala64 
Commentaire publié le vendredi 28 juillet 2006 à 14 h 25 par tibolan Commentaire publié le vendredi 28 juillet 2006 à 20 h 56 par koala64 Commentaire publié le samedi 29 juillet 2006 à 06 h 59 par tibolan Commentaire publié le samedi 29 juillet 2006 à 07 h 12 par tibolan Commentaire publié le samedi 29 juillet 2006 à 07 h 21 par tibolan Commentaire publié le samedi 29 juillet 2006 à 10 h 24 par koala64 
Commentaire publié le mercredi 30 août 2006 à 17 h 36 par zygwi Commentaire publié le jeudi 31 août 2006 à 14 h 13 par koala64
#menu dl dt a {
cursor: default;
}
oA.onclick = o.Menu.__Discard__;
Commentaire publié le mercredi 06 septembre 2006 à 09 h 08 par zygwi Commentaire publié le mercredi 06 septembre 2006 à 10 h 50 par koala64 
Commentaire publié le mardi 19 septembre 2006 à 11 h 50 par guillaumechx Commentaire publié le mardi 19 septembre 2006 à 13 h 59 par koala64 
Commentaire publié le mercredi 10 janvier 2007 à 13 h 22 par jarodender Commentaire publié le mercredi 10 janvier 2007 à 13 h 51 par koala64 
Commentaire publié le vendredi 05 décembre 2008 à 17 h 47 par han09 Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.
Discutez et échangez sur ce thème dans notre forum Javascript - DHTML - VBScript.
02/07/2009 à 11 h 57
Probleme Rafraichissement sous IE (0 réponse)
01/07/2009 à 18 h 35
Faire un dégradé de couleur avec du texte (0 réponse)
30/06/2009 à 15 h 20
Popup Window JS façon Prototype Window (3 réponses)
29/06/2009 à 16 h 14
message de confirmation en javascript (0 réponse)
28/06/2009 à 18 h 27
Compte à rebours en javascript (1 réponse)