menu mobile avec slicknav

Général
1

Bonjour

Je sais, c'est carrément hors spip mais tant pis ...

Voilà, j'utilise le script slicknav.js pour afficher un menu sur mobile

Sur mon squelette Escal, je propose 3 menus différents et on peut afficher un menu horizontal et un menu vertical en même temps, donc 2 menus sur la page.

Si j'utilise id="menu" pas de souci oui mais pour respecter les normes html (le id doit être unique) j'utilise plutôt un class="menu" .

Et dans ce cas, le menu mobile s'affiche 2 fois. Et je suis bien trop nul en js pour comprendre comment modifier le script pour qu'il ne m'affiche qu'un menu.

Si quelqu'un est intéressé par le problème, je peux donner plus de détails.

Merci pour toute piste.

JC

2

Bonjour,

Avec un class=« menu_1 » et menu_2 ?

3

comment se déclare l’action de slicknav.js ?
il y a sûrement le moyen de cibler le menu qu’on veut actionner, et pas l’autre…

4

Le souci est que, si j’ai bien compris, le déclenchement se fait via un

5

donc selon l’emplacement, pour seul celui dans .aside soit actionné :
$(’.aside .menu’).slicknav();

6

En fait c’est un peu plus complexe car sur un ordi, les 2 menus s’affichent mais pas le menu slicknav

Et sur les mobiles c’est l’inverse, je fais disparaitre les menus et le menu slicknav s’affiche.

En fait j’ai entouré les menus d’un

…
que je fais disparaitre avec un .menumobile{display:none}

et le script est en fait

7

je comprends pas tout, dans .menumobile il y a plusieurs menus ?
et pourquoi le menu grand écran ne peut pas s’adapter en menu masqué/affiché ?

8

Ok je vais essayer d’expliquer un peu plus.

Objectif :

Sur un ordi, 2 menus s’affichent : 1 menu horizontal sous le bandeau et 1 menu vertical sur le côté

Sur mobile : ces 2 menus ne s’affichent pas et son remplacés par un menu slicknav.

Mise en place :

  • les 2 menus sont encadrés d’un

    …

  • dans les css pour les mobiles on a un .menumobile{display:none} dans mobile.css

  • dans le head, on a

[]
[]

  • dans le pied de page on a

ça fonctionne bien mais le menu est en double sur les mobiles car 2 blocs avec class=« menumobile »

Si je passe en id=« menumobile » et $(‹ #menumobile ›).slicknav(); dans le script, tout est ok mais j’ai une erreur html car 2 blocs avec le même id

9

Bonjour

Je m’en suis sorti avec un autre js et en jouant avec les display

Merci

JC