/*****************************************/ /* */ /* Menu déroulant accessible */ /* Version du tutoriel */ /* Script DOM tuto-menu.js */ /* Auteur: koala64 */ /* Contact: contact_koala64@yahoo.fr */ /* */ /*****************************************/ // 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__;