Menu « dépliant » comme dans l’administration de SPIP

Un menu dépliant obtenu en adaptant le layer.js utilisé pour l’admin de spip.

C’est un article de plus proposant un menu « dépliant ».
L’intérêt ici est sa facilité de mise en oeuvre.
Tous les fichiers seront à déposer dans le dossier squelette, les images dans le dossier images, le javascript dans un dossier js créé pour l’occasion s’il n’existe pas et évidemment le menu correspondant dans le dossier squelettte.

-  Adaptation du layer.js : il s’agit juste de remplacer le nom des images choisies pour les flèches. Personnellement, j’ai choisi : deplierhaut.png, deplierbas.png, deplierhaut_rtl.png. Le fichier est renommé en deplier.js et placé dans : #DOSSIER_SQUELETTE/js (#DOSSIER_SQUELETTE correspondant au dossier où vous avez déposé votre squelette pour spip 1.8.3)

-  Appel du script entre les balises <head> et </head> :

<script language="javascript" type="text/javascript" src="#DOSSIER_SQUELETTE/js/deplier.js"></script>

-  Ecriture des boucles spip :

<BOUCLE_rub(RUBRIQUES) {racine} {par titre}>
<a href="javascript:swap_couche('#ID_RUBRIQUE','','#DOSSIER_SQUELETTE/images/',0)" title="Cliquer pour déplier">
<img name="triangle#ID_RUBRIQUE" src="#DOSSIER_SQUELETTE/images/deplierhaut.png" border="0" alt="f1" /></a>
<a href="#URL_RUBRIQUE">#TITRE</a>
<script language="javascript" type="text/javascript">
	<!--
	vis['#ID_RUBRIQUE'] = 'hide';
	//-->
	</script>
<B_sous_rubriques>
<div id='Layer#ID_RUBRIQUE' style='display: none; margin-top: 1;'>
<ul>
	<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
	<li>
	<a href="#URL_RUBRIQUE">#TITRE</a>
	</li>
	</BOUCLE_sous_rubriques>
</ul>
</div>
</B_sous_rubriques>
</BOUCLE_rub>

On obtient alors un menu qui se déplie à la façon de l’admin de spip.
Evidemment, on peut améliorer les choses mais le but était que cela soit simple à mettre en oeuvre.

Le code spip se trouve dans le fichier menu et vous pouvez adapter les flèches deplierbas.png et deplierhaut.png à votre guise (les images données sont blanches et sur fond transparent, cela passe bien sous Firefox mais moins bien sous IE).

Dernière modification de cette page le 20 août 2009

Discussion

Aucune discussion

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom