jmenus_list ~ les menus du site

L'idée première était d'afficher les menus du site dans la documentation du site.
Vous pourrez constater que nous avons un menu totalement fonctionnel qui tient compte des ACL.

Avec ce simple shortcode, vous obtenez une arborescence de tous les menus du site. Du moins, ceux visibles pour votre niveau d'accès.

{up jmenus-list}

Pour la démonstration, je vais prendre uniquement le menu de bas de page de ce site en indiquant son "menutype" comme argument principal.
Donc avec le shortcode {up jmenus-list=menufooter}, nous obtenons ce résultat :

Les 2 premières lignes sont les informations sur le "menutype". La mise en page est celle définie par défaut pour l'option  template-menutype, soit : 
h5]##title## (id:##id##)[/h5] ##description## / ##menutype##

Les lignes suivantes sont les items du menu avec la mise forme par défaut pour l'option  template-menu:
##title-link##[small] (id:##id##) ##access## - ##component## ##language##</small] ##note##

Les textes bleus en italique sont les notes que l'on définit dans la fiche du menu.

Les options

jmenus-list

prefset, la liste des menutypes séparée par des virgules ou vide pour tous

menutype

idem option principale. Permets de définir le ou les menutypes  pour un prefset

template-menutype

Le modèle pour afficher le nom du menu

[h5]##title## (id:##id##)[/h5] ##description## / ##menutype##

Les mots clés sont

##title## : le nom du système de menu

##id## : ID du système de menu

##description##

template-menu

Le modèle pour afficher les items du menu

##title-link##[small] (id:##id##) ##access## - ##component## ##language##[/small] ##note##

Les mots clés sont

##title## : titre du menu

##title-link## : idem title avec lien

##id## : id de l'item menu

##access## : niveau d'accès requis

##component## : le composant appelé par le menu

##language## : langage si différent de tous (*)

##note## : la note saisie dans la description du menu

model-note

[i class="t-bleu"] %s[/i] par défaut. si une note existe, elle sera insérée en suivant ce modèle

V5.1 - rendu sur plusieurs colonnes

{up jmenus-list=menu-top
 | main-tag=div
 | template-menu=[p class="level_##level##"][a href="##link##"]##image####title##[/a][/p]
 | css-head=
#id[column-count:1;]
@media (min-width:640px)[#id[column-count:2]]
@media (min-width:960px)[#id[column-count:3]]
@media (min-width:1200px)[#id[column-count:4]]
#id p[margin:0]
#id .level_1 a[font-weight:bold]
#id .level_2[margin-left:1rem; border-bottom:1px dotted navy]
#id .level_2:before[content:"\25A0 \A0 "; color:navy; font-size:80%;]
#id .level_3[margin-left:2rem]
#id .level_3:before[content:"\25CF \A0"; color:gold]
}

ligne 2 : le format liste ne convient pas pour un affichage sur plusieurs colonnes. Nous remplaçons la balise UL (par défaut) par une DIV.

Chaque item du menu sera dans une balise P. UP affecte automatiquement une classe level_x, Cela permettra de styler les sous-menus

ligne 3 : le template utilise le nouveau mot-clé ##image## qui permet d'afficher l'icône CSS ou l'image spécifiée dans le menu

ligne 4 : l'option css-head, qui évite l'appel à une feuille de style, contient toutes les règles CSS

ligne 5 à 8 : le nombre de colonnes selon la largeur de l'écran. 

ligne 9 : je supprime les marges par défaut d'une balise P. Pour mémoire, #id sera remplacé par d'identifiant du bloc principal de l'action

ligne 10 : les items de premier niveau seront en gras

ligne 11 : on ajoute une marge gauche et un soulignement aux items de niveau 2

ligne 12 : on ajoute une puce bleu (navy) devant les items de niveau 2

ligne 13 et 14 : idem aux lignes 11 et 12 pour les items de niveau 3