Menu dépliant arborescent PureDOMExplorer

Publié le : 16 mars 2007 – Dernière modification le 21 décembre 2021 – par rpapa – 65 commentaires

1
2
3
4
5
5 votes
Menu dépliant arborescent associant boucles SPIP et du javascript pour réaliser une menu respectueux du DOM

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

  1. 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.
  2. Mettre le menu en plugin

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

22 discussions

  • 4
    spipfactory

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

    • hors point de menu : menu_pde mais un : menu-pde j’ai donc modifier l’inclure par menu-pde

      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

    • spipfactory

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

    • rpapa

      prenons le cas du menu avec articles (le deuxième zip)

      ouvrons la feuille de style pde.css
      au début tu trouves
      ======== extrait============

      	
	ul.pde a:link,
	ul.pde a:visited,
	ul.pde a:hover,
	ul.pde a:active{
		text-decoration:none;
		color:#111;
	}
	ul.pde,ul.pde li{
		margin:0;
		padding:0;
		list-style:none;
	}
	ul.pde{
		text-align:left;
		font-size:1.1em;
		margin:.8em auto;
		background:transparent;
  border-style: dotted; border-width: thin;
		width:100%;
	}
.......

      tu peux changer la taille (paramètre font-size:1.1em; ) et la couleur du fond (background:transparent; )en modifiant le code de

      	ul.pde{
		text-align:left;
		font-size:1.1em;
		margin:.8em auto;
		background:transparent;
  border-style: dotted; border-width: thin;
		width:100%;
	}

      pour la taille et la couleur de la liste des articles, plus bas dans la feuille de style, tu trouves :

      ul.pde li.art a{
  color:yellow;
  font-size:0.8em;
}

il suffit la encore, de modifier les deux paramètres.

A+

    • 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

  • 4
    spipfactory

    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

    [(#REM) Balise permettant aux plugins d'inserer des appels javascript ou css ]
#INSERT_HEAD

[(#REM) plugins munu rubriques]
<style type="text/css">	@import '#CHEMIN{pde.css}';	</style>
<script type="text/javascript" src="spip.php?page=pde.js"></script>

    comme précité ; mais pour a feuille de style du javascript ; tu parle de quoi ....?

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

      je voulais dire entre les balises

      et

      de chaque squelette appelant le menu.....

    • ne pas tenir compte de cette réponse, lire l’autre

    • rpapa

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

      je voulais dire entre les balises <head> et </head> de chaque squelette appelant le menu...

    • je voulais dire entre les balises

      et

      de chaque squelette appelant le menu...

      donc on peu simplifier en s’appuyant sur le fichier « inc-head ».

      en faisant :

      [(#REM) Menu dépliant arborescent PureDOMExplorer]
<style type="text/css">	@import '#CHEMIN{pde.css}';	</style>
<script type="text/javascript" src="spip.php?page=pde.js"></script>

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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