Menu expansif, multiniveaux

Soyez le premier à donner votre avis sur cette source.

Vue 26 372 fois - Téléchargée 3 249 fois

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

Ajouter un commentaire Commentaires
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
3 déc. 2004 à 19:54
Moi je dis bravo...
Franchement super tout est vraiment automatisé, c'est géant...
bibi_81 Messages postés 345 Date d'inscription jeudi 2 septembre 2004 Statut Membre Dernière intervention 25 octobre 2007
30 janv. 2005 à 15:36
bvo !
cs_scls19fr Messages postés 15 Date d'inscription lundi 19 janvier 2004 Statut Membre Dernière intervention 29 janvier 2009 1
14 févr. 2005 à 21:53
Excellent !

Est-il toutefois possible de "mémoriser" le dernier choix ?
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
15 févr. 2005 à 00:53
Pour que le menu reste inchangé quand on change de page ?.
Dans le cas d'un site avec frames, oui, sinon on peut envisager de transférer le tableau menu_ouvert[] à la page suivante. En PHP c'est peut-être plus facile, mais je ne connais pas.
jackh82 Messages postés 2 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
6 févr. 2009 à 19:16
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
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)