Javascript

Menu et Navigation

Menu et Navigation - Organiser vos répertoires physique avec le menu hiérarchique

Techniques utilisées dans ce truc : document.write, Split. location.href,

Techniques utilisées dans ce truc : document.write, split, location.href

Le Menu hiérarchique est une excellante façon d’organiser votre site Internet pour récupérer l’information selon leurs dispositions physiques sur le serveur. Cette technique est surtout pratique si vous avez beaucoup d’information à offrir et si cette information peut être classer en plusieurs ensembles. Cette technique est en fait la base de l’organisation visuel d’un ordinateur.

Par exemple vous présenter des livres, et bien vous pourrez créer les répertoires Roman, poésie, Science fiction, bande dessinée, éducation et ainsi de suite. Puis de créer une page Index.htm dans chacun des répertoires donnant la liste de tous les livres de cette catégorie.

Ainsi il vous sera alors très facile d’ajouter des pages sans avoir à créer de nouveau menu ou de refaire une analyse complète de votre site. Ajouter votre nouvelle page avec le menu hiérarchique puis ajouter votre nouvelle page dans l’index de ce répertoire.

Votre site restera simple et très facile au visiteur à parcourir tout en ayant la possibilité d’ajouter des pages à volonté. Vous pouvez aussi créer des sous-répertoires comme les noms des auteurs par exemple et de créer une page Index.htm dans le sous-répertoire ASIMOV donnant la liste de tous les livres de science fiction de ASIMOV.

L’étape la plus complexe et la plus importante est donc de faire une première analyse de votre site. Regrouper vos sujets en catégorie (sachez que cette technique permet très facilement d’ajouter des catégories) il suffit de trouver les bonnes catégories. Pour vous aider, chercher les catégories qui seront les plus explicites pour le visiteur.

Par exemple.

1. Première catégorie LIVRE, DISQUE, CÉDÉROM…
2. Deuxième catégorie LIVRE : ROMAN, POÉSIE, SCIENCE-FICTION…
3. Troisième catégorie LIVRE-SCIENCE-FICTION : ASIMOV, VAN VOGT, CLARKE
4. Quatrième catégorie LIVRE-SCIENCE-FICTION-VAN VOGT : Le Monde des Â, Les joueurs du Â.

Donc en partant de la racine de votre site jusqu’à la page qui présente le livre Le Monde des  vous aurez cette URL. www.votresite.com/livre/science-fiction/van_vogt/monde.htm.

Le visiteur pourra alors revenir au répertoire depuis la page en question jusqu’à l’index principal en trois clics ou obtenir depuis l’index principal le livre Le Monde des  en trois clics ou tous livres de votre collection en trois clics. C’est formidable ça…

Pour résumer, une fois votre système bien installé, vous n’aurez qu’un lien à ajouter dans l’index du répertoire où vous ajoutez une page et d’ajouter le code Javascript du menu sans changer quoi que ce soit sur votre nouvelle page

Description du script :

La première étape consiste à trouver l’adresse de votre page avec la mnémonique document.location.href. Puis de disséquer cette adresse dans une variable S en se fiant sur le caractère / avec href.split. Alors il ne vous reste qu’à faire une boucle pour extraire les noms des répertoires de la racine à la page en question. for (var i=3;i<(s.length-1);i++) Au fur et à mesure que vous extirpez un nom de la variable S, vous devez construire une variable texte PATH qui servira à générer le code HTML. Cette variable sera construite avec la balise A HREF pour créer le lien puis du nom du répertoire extirpé de la variable S path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"/\">"+s[i]+"</A>

Bon ça semble bien compliquez mais amusez-vous avec le code ci-dessous et vous verrez bien que ce n’est pas si pire que ça. Et n’oubliez pas que vous n’aurez plus à jouer avec ce code mais seulement de le copier sur chacune de vos pages. Vous pouvez ajouter une image lors de la construction de la variable PATH question de bien identifier le lien. Il ne reste qu’à générer le code HTML contenue dans la variable PATH avec document.writeln(path). Noté l’utilisation du signe + dans la construction de la variable PATH, path+, c’est la façon Javascript de faire path = path +...Et notez aussi la barre oblique \ utilisé (comme en Perl) pour indiquer que le caractère qui suit " fait partie de la chaîne de caractère

<script language="JavaScript">
<!--
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=3;i<(s.length-1);i++) {
  path +="<a href=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"/\">"+s[i]+"</a> *";
}
document.writeln(path);
// -->
</script>

Voyez en jaune l’astérisque que j’ai ajouter pour faire une séparation entre les liens. Vous pouvez ajouter une image. Selon votre serveur il se peut que le script ait besoin d’être adapté, si le script donne de drôle de résultat, changer la valeur de la boucle, (i=3 dans cette exemple). Encore une fois, une fois le script adapté vous pourrez l’oublier.