[RÉGLÉ] Menu vertical en mode portrait sur tablettes, au lieu de hamburger

[RobertG]

Bonjour,

Je crée une nouvelle discussion parce qu'après avoir réglé la question du menu sur smartphone en paramétrant le module en "collapsible dropdown", je me suis aperçu que sur les tablettes, y compris une Surface 2, le menu s'affiche là aussi en vertical. Et je ne vois pas où intervenir pour régler ça afin que le menu s'affiche en horizontal s'il n'est pas important, ou en mode hamburger.

Je viens de vérifier sur trois sites ( 2 de tests à moi, un de démo d'un tiers) utilisant Cassiopeia et sur les trois, j'ai ce même phénomène de menu vertical sur tablette en mode portrait. En mode paysage, le menu est horizontal.
Même image sur Responsinator pour l'avant dernier écran IPad portrait width 768px.

J'avais oublié l'image !
[ATTACH=CONFIG]n2042646[/ATTACH]

Avez-vous une idée de solution ? Merci !

[tataye]

"
Sorry, you are not authorized to view this page. For assistance contact the site administrator"

tu peux la renvoyer ?

[RobertG]

Oh, désolé, j'ai déplacé et modifié mon message, j'étais persuadé que l'image s'afficherait :

[RobertG]

Bonjour,

Si je comprends bien la feuille de style template.css lignes 4207 et suivantes (et son pendant min), sur tous les écrans entre 768 et 992 pixels, le menu via navbar-expand-md est défini pour cet affichage vertical.
Il n'est en hamburger que pour moins de 768 px et passe en horizontal pour 992 px et plus.

Comment le passer lui aussi en hamburger ou le forcer en horizontal pour cette plage de largeurs ?

[lefabdu51]

bonsoir, il suffit de copier les règles définies pour les périphériques de moins de 768px situés dans la requete media correspondante @media max-width 76_px, dans la requete media concernant les peripheriques dont la largeur se situe entre 768px et 992px .la requete media correspondante doit être @media min width 768px and max_width 992px.

[RobertG]

Merci ! mais ce n'est pas logique que le template par défaut se comporte ainsi, non ?

[herve]

Bonjour
Je comprends le problème mais à part un contournement, je ne vois pas vraiment de solution.
La variété des écrans est considérable, le HTML étant de s'adapter au mieux avec des valeurs définies arbitrairement (si je comprends bien) pour les écrans les plus courants

[RobertG]

Bonjour,

Pour moi, c'est vraiment une anomalie de Cassiopeia. J'ai un fonctionnement tout à fait logique horizontal<-->hamburger avec les templates Astroid, sans passer par un affichage vertical

[daneel]

Dans le fichier collapse-metismenu.php du module menu en override par défaut (html/mod_menu)

il y a cette ligne :

<nav class="navbar [B]navbar-expand-md[/B]" aria-label="<?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?>">

Elle définit le menu de navigation avec la classe navbar-expand-md par défaut dans cassiopeia

Bootstrap 5 (bs5) utilise les classes navbar-expand* pour déterminer le point de rupture (pointbreak) de la barre de navigation. Il existe d'autres classes navbar-expand si on veut changer cela.

https://getbootstrap.com/docs/5.2/components/navbar/

Pour cela, dans l'administration du site joomla, effectuer une autre substitution (aussi appelé surcharge ou override) depuis la gestion des templates, éditer votre fichier via l'éditeur en ligne et remplacer la classe boostrap navbar-expand-md par navbar-expand-lg ou autre puis editer le module pour choisir la substitution personnalisée.

D'après la documentation de bootstrap, on a le choix :
.navbar-expand{-sm|-md|-lg|-xl|-xxl}

navbar-expand-sm = affichage menu mobile sur les écrans xs <576px
navbar-expand-md = affichage menu mobile sur les écrans sm <768px
navbar-expand-lg = affichage menu mobile sur les écrans md <992px
navbar-expand-xl = affichage menu mobile sur les écrans lg <1200px

Plus récemment (depuis bs5)
navbar-expand-xxl = affichage menu mobile sur les écrans lg <1400px

Ceci vient en complément des informations indiqués précedemment.

De mon avis, Cassiopeia n'a pas d'anomalies car le template utilise ce qui a été défini par la librairie bootstrap 5 combiné avec css grid comme indiqué dans la documentation officielle de bootstrap. Donc privilégier le paramètrages de bootstrap avant de définir vos propres points de rupture.

L'affichage du menu se fait avec le module mod-menu, il n'y a pas besoin nécessairement de créer un template enfant, de modification du fichier index.php ou de fichier css, le changement de point de rupture du menu peut donc se faire avec une surcharge du module depuis l'administration de joomla.

[RobertG]

Merci de ces explications (c'est efficace ), mais tu voudrais dire qu'il est normal que l'affichage passe par ce menu vertical ?

Pour moi, recréer une surcharge n'est pas logique (et pas à la portée de tous) quand d'autres templates (testé avec Astroid, Helix Ultimate et T4 Framework) passent directement du menu horizontal au hamburger, évitant cet envoi du contenu en bas d'écran.

[daneel]

Merci de ces explications (c'est efficace ), mais tu voudrais dire qu'il est normal que l'affichage passe par ce menu vertical ?

Pour moi, recréer une surcharge n'est pas logique (et pas à la portée de tous) quand d'autres templates (testé avec Astroid, Helix Ultimate et T4 Framework) passent directement du menu horizontal au hamburger, évitant cet envoi du contenu en bas d'écran.

Cependant c'est logique.



Tu ne peux pas juger les autres templates... helix par exemple a recréé toutes les vues en override (composants et modules) dans son framework (plugin/system/helixultimate/override) et non dans son template. Au résultat, tu as par exemple des quantités hallucinantes de fichiers à valider en override pour un simple changement. Il faudra attendre la mise à jour de joomshaper pour valider les overrides globalement ou l'action depuis la 4.2.2.

Et je ne te parle pas des petites défauts d'accessibilité comme le menu justement qui ne fonctionne qu'au survol alors que l'on devrait avoir au clic. Le fait qu'il soit redéfini leur permet de proposer un megamenu que je ne l'utilise pas.

J'ai d'autres exemples comme l'absence de bouton webauthn ( je crois que cela a été corrigé avec la dernière mise à jour d'helix) ou la présence jquery par défaut (de ce fait, c'est comme revenir en arrière sur la performance!)

Donc raisonnablement, les solutions avec frameworks sont d'un coté "compatible" avec bootstrap 5/joomla 4 mais on dépend des choix des développeurs et de leur réactivité ou de l'autre, on utilise le standard sur bootstrap 5 avec cssgrid avec Cassiopeia, on s'assure de la compatibilité avec les mises à jours sur le template cassiopeia de référence.

[daneel]

Alternative au menu vertical et vu que c'est le sujet, Viviana Menzel a proposé il y a plusieurs mois de le transformer en offcanvas :

https://gist.github.com/drmenzelit/1...194965e43c97f4

Marc avait déjà présenté cela sur le forum : https://forum.joomla.fr/forum/joomla...fant-cassiopea et dans sa présentation : https://slides.woluweb.be/cassiopeia...-small-screens

[woluweb]

A vrai dire, c est à ma demande qu elle a fait ce offcanvas ????
Je trouvais que sans ça Cassiopeia faisait pas très pro sur smartphone...