Ressources en ligne:
- RGAA – Critère 9.3 [A] Dans chaque page web, chaque liste est-elle correctement structurée ?
- Le plugin « Menus » de SPIP
- La boucle CONDITION de SPIP
Problème: Structure de listes dans les menus
Les menus, qui sont présents sur toutes les pages comprennent des listes de un seul élément ce qui n’est pas du tout efficace pour les structurer.
Solution:
Objectif: il s’agit, pour résumer, de remplacer des balises UL et LI par des balises DIV, mais attention: pas dans tous les cas!
Pour ce faire, deux actions à réaliser:
1. Modifier la balise UL portant les classes « menu-liste menu-items nav » et l’attribut DATA-DEPTH lorsque sa valeur est « 1 » en la remplaçant par DIV.
Remarque: quand la valeur de l’attribut DATA-DEPTH est de « 0 » ou « 2 », on ne remplace pas la balise UL par DIV.
2. Modifier la balise LI portant les classes « menu-entree item colonne » en la remplaçant également par DIV.
Remarque: il faut remplacer la balise LI par DIV seulement si celle-ci se trouve imbriquée dans une balise DIV remplissant deux conditions:
- la balise parente DIV (initialement UL avant le changement en point 1) porte les classes « menu-liste menu-items nav »,
- la balise parente DIV à un attribut DATA-DEPTH dont la valeur est « 1 » (pas « 0 » ou « 2 »).
Fichier spip/plugins/contrib/menus/inclure/menu.html:
Avant modification
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<BOUCLE_menu(MENUS){id_menu?}{identifiant?}> <B_entrees> <ul class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]"[ data-depth="(#ENV{depth,0})"]> <BOUCLE_entrees(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''} [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '} ]<BOUCLE_sous_menu(MENUS){id_menus_entree}> <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu>[(#REM) On ferme le li si le type d'entrée accepte des sous-menus et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION) ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non}) </li>] </BOUCLE_entrees> </ul> </B_entrees> </BOUCLE_menu> |
Après modification
On ajoute une condition si la profondeur est égale à « 1 », alors on transforme les UL/LIs en DIVs, sinon on ne touche pas à la structure initiale.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<BOUCLE_test_depth(CONDITION){si #ENV{depth}|=={1}}> [(#REM) _vrai: si la profondeur est de "1"] <BOUCLE_menu_vrai(MENUS){id_menu?}{identifiant?}> <B_entrees_vrai> <div class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]" data-depth="1"> <BOUCLE_entrees_vrai(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''} [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '} ]<BOUCLE_sous_menu_vrai(MENUS){id_menus_entree}> <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_vrai>[(#REM) On ferme le li si le type d'entrée accepte des sous-menus et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION) ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non}) </div>] </BOUCLE_entrees_vrai> </div> </B_entrees_vrai> </BOUCLE_menu_vrai> </BOUCLE_test_depth> [(#REM) _faux: si la profondeur n'est pas de "1"] <BOUCLE_menu_faux(MENUS){id_menu?}{identifiant?}> <B_entrees_faux> <ul class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]"[ data-depth="(#ENV{depth,0})"]> <BOUCLE_entrees_faux(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''} [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '} ]<BOUCLE_sous_menu_faux(MENUS){id_menus_entree}> <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_faux>[(#REM) On ferme le li si le type d'entrée accepte des sous-menus et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION) ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non}) </li>] </BOUCLE_entrees_faux> </ul> </B_entrees_faux> </BOUCLE_menu_faux> <//B_test_depth> #FILTRE{trim} |
Fichier spip/plugins/site/squelettes/mass_squelette/v1/menus/colonne.html:
Avant modification
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#SET{contenu, #ENV*{contenu}|_T_ou_typo} [(#ENV{appel_formulaire}|oui) <div class="titre"><:mass:menu_colonne_nom:></div> [<div class="libelle">(#ENV{libelle})</div>] <div class="titre"><:mass:menu_colonne_nom:></div> [<div class="libelle">(#ENV{libelle})</div>] ] [(#ENV{appel_menu}|oui) <li class="menu-entree item colonne[ (#ENV{css})]"> [(#GET{contenu}|expanser_liens)] ] [(#FILTRE{trim})] |
Après modification
…devient (un simple remplacement de l’élément li par div) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#SET{contenu, #ENV*{contenu}|_T_ou_typo} [(#ENV{appel_formulaire}|oui) <div class="titre"><:mass:menu_colonne_nom:></div> [<div class="libelle">(#ENV{libelle})</div>] <div class="titre"><:mass:menu_colonne_nom:></div> [<div class="libelle">(#ENV{libelle})</div>] ] [(#ENV{appel_menu}|oui) <div class="menu-entree item colonne[ (#ENV{css})]"> [(#GET{contenu}|expanser_liens)] ] [(#FILTRE{trim})] |
Un peu de style:
Si votre menu utilise un thème Bootstrap, vous aurez probablement à rajouter cette ligne quelque part dans l’un de vos fichiers de style:
|
1 2 3 |
.navbar .nav > div { float: left; } |