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

updated on 20 August 2009

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom