menu comme l'explorateur

accueil > Cours > JAVASCRIPT > menu comme l'explorateur

Cours / tutoriel écrit le 17-06-2010 par 3run0

Un menu comme l'explorateur windows

Voici un petit script qui va vous permettre de faire un menu ou un plan du site, comme dans l'explorateur.
La technique utilisée, HTML CSS et 5 lignes de JavaScript, rien de bien sorcier. :)
Le principe, un répertoire dans lequel on pourra mettre, soit d'autres répertoires, soit une liste de fichiers

La demo

le code source d'un repertoire

<!-- ----------------------------------------- REPERTOIRE ------------------------------------------- -->
  <div class="niveau" id="accueil0">
	<span class="plus" id="accueiln1" onclick="nivoplus('accueil','1');return(false)">+</span>
 	<img class="dossier" id="accueili1" src="dossier-f.png" alt="" align="middle" />
	<a href="" >accueil0</a><br />
		<!-- ici on placera soit un autre repertoire, soit une liste de fichiers -->

  <div
<!-- --------------------------------------------------------------------------------------------------- -->

La feuille de style CSS

  body {background-color:white;}
  /*element body no comment */
 .plus {font-family:monospace;border:outset #999999 1px;font-weight:bold;cursor:pointer;}
 /* la classe plus defini le look du petit + à gauche du dossier */
 .niveau {position:relative;width:250px;display:none;left:35px;top:-2px;text-align:left;margin-top:0}
 /* la classe niveau définie la position des differents niveaux de repertoires, et sous repertoires ... */
 .niveau li {list-style-image:url('sui.gif')}
 /* tout simplement l'image de la liste des fichiers */
 #accueil0 {display:block}
  /* l'id accueil0 visible */

Alors une précision au passage, une classe CSS .maclasse s'ecrit avec un point devant, porte le nom qu'on a envie et peut revenir plusieurs fois dans la même page et aussi sur des éléments différents.
Un id #monid s'ecrit avec un dieze devant, porte le nom qu'on a envie et n'est présent qu'une fois dans la même page et sur un seul élément. en contre partie, il peut être manipulé par du JavaScript.
<div class="niveau" id="accueil0">
Dans c'est exemple on défini une classe .niveau et un ID #accueil0 c'est élément bénéficie donc d'une classe commune à tout les répertoires et un ID unique qui permet de le manipuler individuellement en JavaScript.

Le code JavaScript

<script type="text/javascript">
var OnOff = new Array();
function nivoplus(id,nv){
var bloc=id+nv;
OnOff[bloc]=OnOff[bloc]==false?true:false;
document.getElementById(id+"n"+nv).innerHTML=OnOff[bloc]==false?"-":"+";
document.getElementById(bloc).style.display=OnOff[bloc]==false?"block":"none";
document.getElementById(id+"i"+nv).src=OnOff[bloc]==false?"dossier-o.png":"dossier-f.png";
}
</script>
  

Dans ce code rien de bien sorcier, la variable OnOff[] est un tableau qui nous permet de retenir l'état ouvert ou fermé de chaque elements, on joue simplement avec le nom du repertoire et le numero du rang qu'on lui donne, ainsi on pourra aussi bien manipuller l'image fichier ouvert ou fermé, afficher cacher le div ou la liste qui contient les nom de repertoires ou de fichiers.

---

Commentaires