Menu expansif, multiniveaux

Télécharger le projet
Commenter

Description

Un menu arborescent dont les rubriques se développent et se réduisent au clic de souris ou au clavier, visble ici :
http://moncastel.9online.fr/menu_xpand/menu.htm

Conçu à partir d'une liste à puce énumérative, le menu est accessible au navigateur le plus basique : texte, Html, Braille, Synthèse vocal et moteurs de recherche. Pour les navigateurs récents, supportant javascript et DOM1, autant dire tous après les versions 4, sauf Opéra à compter de la version 7

Constrution :
ajouter id="menu"dans la balise du premier UL du menu.

dans le head ajouter :

<script type="text/javascript" src="menu.js"></script>

Dans le répertoire commun, copier le fichier menu.js

Il est possible aussi de modifier le style dans le fichier menu.css après avoir ajouté également :

<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />

Pour finir, placez les images livre ouvert et fermé dans le même répertoire.

Source / Exemple : 


<!--// Michel Deboom février 2005, menu arborescent expansif
// sans image ajoutée  
    // paramétrage :
idMenu = 'menu'
idAncre = 'ancre_menu'
// mettre 0 pour désactiver une option :
mno = 1 // un seul sous-menu ouvert par niveau
lien_ouvert = location // lien ouvert par défaut

function initMenu(){
var pm;menuOuvert=[];// tableau des menus ouverts
objMenu=document.getElementById(idMenu);objMenu.className='menu';
liste=objMenu.getElementsByTagName('li');
for(i=0;i<liste.length;i++){L=liste[i];lien=L.firstChild.href;
  if(lien){L.className="normal" 
  // repère le lien de la page en cours
    if(lien == lien_ouvert){
      pm=L.parentNode;L.firstChild.className="lien_page"
      }
    }
  //ajoute un titre cliquable
  if(L.getElementsByTagName('ul')[0]){ // sous-menu éxistant
    titre=L.firstChild.data;L.removeChild(L.firstChild);
    L.innerHTML='<a href="#"title="développer" onkeydown="af(this)" onmousedown="af(this,1);return false">'+titre+'<\/a>'+L.innerHTML;
    // cache les sous_menus
    L.getElementsByTagName('ul')[0].style.display="none";L.className="reduit"
    }
 }
// montre le lien de la page et ouvre les menus parents
gf=0;if(pm)while(pm.id!=idMenu && gf<30){af(pm.parentNode.firstChild);pm=pm.parentNode.parentNode}
ancreMenu();
}

function ancreMenu(){ // déplace le menu construit dans l'élément désigné.
  ancre=document.getElementById(idAncre);
  if(ancre){ancre.appendChild(objMenu);ancre.className='ancre_menu'}
}

function ef(el) { // réduit.
with (el){
  parentNode.getElementsByTagName('ul')[0].style.display="none";
  title="développer";parentNode.className="reduit";
  }
return false
}

function af(el,mulot) { // développe un sous-menu .
if(mulot)el.removeAttribute('href') // supprime le lien prévu pour la navigation clavier.
with(el){sous_menu=parentNode.getElementsByTagName('ul')[0]
  if(sous_menu.style.display=="none"){
    sous_menu.style.display="block";title="réduire";parentNode.className="ouvert";
   } else {sous_menu.style.display="none";title="développer";parentNode.className="reduit";}
  }
  niveau=0;
  // un seul menu ouvert par niveau
  while(sous_menu.id!=idMenu&& niveau<30){niveau++;sous_menu=sous_menu.parentNode.parentNode}
  if(menuOuvert[niveau] && el!=menuOuvert[niveau] && mno)ef(menuOuvert[niveau]);menuOuvert[niveau]=el;
}

// Fonction pour ajouter ou enlever un événement sans écraser l'éxistant. 
function addEvent(obj,evType,fn,capt){
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // DOM 2
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
} 

addEvent(window,"load",initMenu)
//-->

Conclusion :


Si ça intéresse quelqu'un, je pense apporter des améliorations ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (chimelpremier)