Préliminaires
Le menu proposé est basé sur le script proposé sur le site OnlineTools
Sites exemples :
- site de test de la donation lou-salomé
- Sciences -indus en CPPGE
Principe
Le menu est une liste <ul> <li>.....</li> </ul>
associée à la classe pde de la forme suivante :
<ul class="pde">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3_1</a></li>
<li><a href="#">Link 3_2</a>
<ul>
<li><a href="#">Link 3_2_1</a></li>
<li><a href="#">Link 3_2_2</a></li>
<li><a href="#">Link 3_2_3</a></li>
<li><a href="#">Link 3_2_4</a></li>
</ul>
</li>
<li><a href="#">Link 3_3</a></li>
<li><a href="#">Link 3_4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
</ul>
Le script associé pde.js (PureDomExplorer) va reconnaître chaque item de la liste possédant une sous liste et lui associer la classe « parent ». Le script va aussi associer les classes « hide » et « show » permettant de rendre visible ou non la sous liste.
Les Boucles
Version rubriques seules
<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
<BOUCLE_smenu1(RUBRIQUES){racine}{par num titre}{doublons}>
<li>
<a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<B_smenu2><ul [class="(#EXPOSE{show,hide})"]>
<BOUCLE_smenu2(RUBRIQUES){id_parent}{par num titre}>
<li><a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<BOUCLE_ssmenu(boucle_smenu2)></BOUCLE_ssmenu>
</li>
</BOUCLE_smenu2>
</ul>
</B_smenu2>
</li></BOUCLE_smenu1>
</ul>
Les boucles ci-dessus sont des boucles classiques de génération de menu, la seule particularité réside dans la balise #EXPOSE qui va attribuer la classe « hide » ou la classe « show » si la rubrique est la rubrique courante.
Version rubriques + articles
Cette version du menu liste intègre les articles dans le menu et permet d’avoir un plan dépliant du site. Cette version est visible sur le site de lou-salomé
<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
<BOUCLE_menu-racine(RUBRIQUES){racine}{par num titre}{doublons}>
<li> <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<B_sous-menu>
<ul [class="(#EXPOSE{show,hide})"]>
<BOUCLE_sous-menu(RUBRIQUES){id_parent}{par num titre}{doublons}>
<li class="sousrub"> <a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero)]</a>
<BOUCLE_recursive(boucle_sous-menu)></BOUCLE_recursive> </li>
</BOUCLE_sous-menu>
<BOUCLE_art1(ARTICLES){id_rubrique}>
<li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero|couper{20})]</a></li>
</BOUCLE_art1>
</ul>
</B_sous-menu>
<B_art2>
<ul [class="(#EXPOSE{show,hide})"]>
<BOUCLE_art2(ARTICLES){id_rubrique}>
<li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
[(#TITRE|supprimer_numero|couper{20})]</a></li>
</BOUCLE_art2>
</ul>
</B_art2>
<//B_sous-menu>
</li>
</BOUCLE_menu-racine>
</ul>
Installation
Copier dans votre répertoire squelettes les trois fichiers du zip et les deux images (minus.gif et plus.gif)
- le squelette menu-pde.html
- la feuille de style à personaliser
- le squelette javascript pde.js.html
Modifier vos squelettes afin d’inclure le menu
- dans rubrique.html et sommaire.html
<INCLURE {fond=menu-pde}{id_rubrique}>
- dans sommaire.html et dans tous les squelettes qui n’ont pas de numéro de rubrique
<INCLURE {fond=menu-pde}{id_rubrique=0}>
- dans article.html, il faut créer une boucle englobante pour récupérer l’id de la rubrique
<BOUCLE_art-menu(ARTICLES){id_article}> <INCLURE {fond=menu-pde}{id_rubrique}> </BOUCLE_art-menu>
Ajouter dans l’entête l’appel de la feuille de style du menu et du javascript en ajoutant les lignes :
<style type="text/css"> @import '#CHEMIN{pde.css}';
</style>
<script type="text/javascript" src="spip.php?page=pde.js">
</script>
On remarquera l’appel du script via la commande spip.php?page=pde.js"
, le script comportant des balises spip, il est nécessaire d’évaluer ces balises.
Evolutions
- L’évolution à prévoir est de modifier le script afin d’utiliser la librairie Jquery plutot qu’un nouveau script indépendant. N’hésitez pas à proposer cette évolution.
- Mettre le menu en plugin
Discussions par date d’activité
22 discussions
petit retour ...
plugins desactivé + SPIP 1.9.2a [8878]
Modifier vos squelettes afin d’inclure le menu
* dans rubrique.html et sommaire.html
hors point de menu : menu_pde} mais un : menu-pde
j’ai donc modifier l’inclure par menu-pde
le menu s’affiche donc mais une erreur aussi :
# Erreur(s) dans le squelette
* ()
Erreur MySQL
id_rubrique FROM spip_rubriques WHERE id_rubrique=
You have an error in your SQL syntax ; check the manual that corresponds to your MySQL server version for the right syntax to use near ’’ at line 3
AIDE,
pouvez vous m’aider.....
merci, je vais modifier
il faut appeler le menu avec un numéro de rubrique, or la page sommaire ne génère pas de numéro de rubrique, il faut alors écrire
Bon coté CSS pour personnalisé ; tu a une explications de la feuille parce que j’arrive a rien . je souhaite modifié la taille d’écriture du menu.
Ah oui en plus j’ai oublié Super ce menu ça me rappel celui de blOog en plus simple a mettre en place...
prenons le cas du menu avec articles (le deuxième zip)
ouvrons la feuille de style pde.css
au début tu trouves
======== extrait============
tu peux changer la taille (paramètre
font-size:1.1em;
) et la couleur du fond (background:transparent;
)en modifiant le code depour la taille et la couleur de la liste des articles, plus bas dans la feuille de style, tu trouves :
Merci pour tous cela est donc fonctionnel est a ma convenance
donc si vous vouler voir un exemple Ville de BACHANT
Superbe boulot
Répondre à ce message
petit retour ...
Ajouter dans l’entête l’appel de la feuille de style du menu et du javascript en ajoutant les lignes :
la j’avoue je comprend pas tous...
pour a feuille de style du menu ; il suffit de mettre dans le fichier inc-head
comme précité ; mais pour a feuille de style du javascript ; tu parle de quoi ....?
je voulais dire entre les balises
etde chaque squelette appelant le menu.....
ne pas tenir compte de cette réponse, lire l’autre
je voulais dire entre les balises
<head>
et</head>
de chaque squelette appelant le menu...je voulais dire entre les balises
etde chaque squelette appelant le menu...
donc on peu simplifier en s’appuyant sur le fichier « inc-head ».
en faisant :
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |