Menu expansif, multiniveaux

Soyez le premier à donner votre avis sur cette source.

Vue 26 130 fois - Téléchargée 3 229 fois

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 ...

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
2
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

J'ai utilisé le menu4 qui me convient bien mais j'ai un petit problème pour positionner le menu sous un entête, il se postionne insensiblement en haut de la page. Que je mette le menu dans un calque, l'entête dans un tableau ou un cadre rien n'y fait.
Il suit cependant bien l'ascenseur ce qui est sympa mais se déplace plus vite !!! Comment y remédier. Je comprends que cela doit venir du CSS position de l'ancre, mais je sais pas comment modifier. En tatonnant cela ne change rien. Bien cordialement. Jack
Messages postés
2
Date d'inscription
mardi 11 juillet 2006
Statut
Membre
Dernière intervention
23 août 2006

Super script mais comme clallier je n'arrive pas a modifier les menus de niveau 1 dès que je change quelque chose j'obtiens un Undefined ...

Merci d'avance
Messages postés
2
Date d'inscription
mardi 11 juillet 2006
Statut
Membre
Dernière intervention
23 août 2006

Super script mais comme clallier je n'arrive pas a modifier les menus de niveau 1 dès que je change quelque chose j'obtiens un Undefined ...

Merci d'avance
Messages postés
1
Date d'inscription
mardi 11 janvier 2005
Statut
Membre
Dernière intervention
30 mai 2006

Très bien la source. 10/10
Je cherchais la même chose sauf que c'est relié à une base de données et j'aimerais que les liens du menu déroulant soient par rapport à une table et qu'il y ait comme résultat une requête avec comme critère (= au lien cliqué) mais je n'arrive pas à reprendre la variable pour savoir quel lien a été cliqué!!!
Je ne sais pas si j'ai été clair! si quelqu'un pouvait m'aider, ce serait gentil. merci
Messages postés
440
Date d'inscription
mardi 21 octobre 2003
Statut
Membre
Dernière intervention
6 mai 2010
1
vraiment bien ta source, mai je souhaiterez placé en 2 menus différents ds 1 seul page , mais je sais pas comment faire, si tu pouvez me donner 2, 3 p'tit tuyau ca serai cool!!!!!!!!!
Afficher les 27 commentaires

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.