Menu déroulant (sans plugin)

Général
#1

Salut tout le monde,

je voudrais avoir des menus déroulants verticaux sur mes deux sites basés sur le squelette-dist.
(par exemple https://dutailly.net/) pour les rubriques à sous-rubriques. Je ne veux pas ajouter de plugin ou de script machin bidule. Sobriété d’abord.

Si j’en crois cette page, il faut avoir d’un côté un fichier html, de l’autre, des CSS. Jusque là on va dire que ça va.

Mais comment je spécifie au menu d’afficher la liste des sous-rubriques d’une rubrique ? J’imagine que le fichier html est une inclusion et pas une page à part comme article.html ou sommaire.html.

Merci d’avance.

#2

Je crois que, pour des questions d’accessibilité notamment (navigation au clavier…), tu n’as pas le choix que d’utiliser du javascript.
Perso, j’utilise celui-là : GitHub - adobe-accessibility/Accessible-Mega-Menu: A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.

Pour le html, tu peux faire <BOUCLE_sous_rub(RUBRIQUES) {id_parent} {par num titre}> dans ta boucle rubriques de 1er niveau.
Si besoin plus d’un niveau, utiliser Les boucles récursives : Les boucles récursives - SPIP

#3

Ah oui merci. Je viens de voir en effet : le CSS « cache » les menus déroulants d’où la nécessité de recourir au javascript.

En conséquence, comme ça fonctionne bien comme ça et sans problème aussi avec un téléphone (en fait c’est même peut-être mieux), je garde le fonctionnement actuel sans menus déroulants mais en sachant pourquoi je fais ainsi :smiley:.

#4

Sans plugin j’utilise le framework Bootstrap
un fichier bootstrap.bundle.min.js

un fichier bootstrap.min.css à placer dans ton dossier js et à appeler dans le head

et puis le fichier nav suivant

[

(#LOGO_SITE_SPIP|image_reduire{*,80})

]

    <BOUCLE_nav(RUBRIQUES) {racine} {id_secteur!==^(1)$}{par num titre, titre}>

  • #TITRE

      <BOUCLE_ssrub(RUBRIQUES){id_parent}>

    • #TITRE

      <BOUCLE_artrub2(ARTICLES){id_rubrique} {si #ID_RUBRIQUE|!={3}}>

    • #TITRE

      • </BOUCLE_artrub2>

      </BOUCLE_ssrub>

      <BOUCLE_artrub(ARTICLES){id_rubrique} {si #ID_RUBRIQUE|=={3}} {par date} {age<0}>

    • [(#DATE|affdate)
      ]

      #TITRE

      • </BOUCLE_artrub>

      <BOUCLE_artrub3(ARTICLES){id_rubrique} {si #ID_RUBRIQUE|!={3}}>

    • #TITRE

      • </BOUCLE_artrub3>

    • </BOUCLE_nav>

#FORMULAIRE_RECHERCHE

plus

.mydropdowncss:hover .dropdown-menu {

display: block;

}

à ajouter dans ton fichier css perso

Le 13 févr. 2023 à 14:31, ID via Discuter de SPIP noreply@discuter.spip.net a écrit :

ID Cheguevarine
Février 13

Salut tout le monde,

je voudrais avoir des menus déroulants verticaux sur mes deux sites basés sur le squelette-dist.
(par exemple https://dutailly.net/) pour les rubriques à sous-rubriques. Je ne veux pas ajouter de plugin ou de script machin bidule. Sobriété d’abord.

Si j’en crois cette page, il faut avoir d’un côté un fichier html, de l’autre, des CSS. Jusque là on va dire que ça va.

Mais comment je spécifie au menu d’afficher la liste des sous-rubriques d’une rubrique ? J’imagine que le fichier html est une inclusion et pas une page à part comme article.html ou sommaire.html.

Merci d’avance.

Voir le sujet ou répondre à ce courriel pour répondre.

Pour vous désabonner de ces courriels, cliquez ici.

Cordialement
William Fourche
william@fourche.fr

+33 (0)6 63 08 13 28

32 rue Henri de Gastines
53160 Vimarcé - France

#5

Merci beaucoup pour la piste Boostrap, sauf que ce n’est pas un genre de solution qui m’intéresse :slightly_smiling_face: Je suis allergique.
Mais ça peut servir à d’autres.