Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Problème affichage menu vertical smartphone

DUPUY
le 26 septembre 2021
à 17:40
Rappel du sujet :

Bonjour, tout d’abord merci pour votre travail ...
J’ai un soucis avec l’affichage du menu vertical lorsque je bascule sur un écran plus petit (tout en hauteur) !
En effet, il disparaît quand je passe dans cette dimension d’écran !
Ai-je fais une boulette ou est-ce normal ?

D’avance merci pour votre aide ...
Cordialement,
Arnaud DUPUY

Problème affichage menu vertical smartphone

Bonjour

Qu’appelle-tu le "bandeau vertical" ?
Une URL du site pour voir ?

Sinon, les colonnes latérales sont déportées en-dessous de la colonne principale sur les petits écrans.

Problème affichage menu vertical smartphone

Bonjour Jean Christophe, je ne parle pas de "bandeau" vertical mais bel et bien du "menu" vertical. En effet, les autres éléments des colonnes latérales s’affichent bien sous la colonne principale, sauf le menu vertical (latéral), d’où mon soucis !
Je n’ai pas pour l’instant d’URL à fournir, je suis en construction, désolé  😉
Merci pour ton aide ...
Arnaud

Problème affichage menu vertical smartphone

Ah oui, j’ai lu trop vite.

En effet, les menus de l’affichage sur grand écran sont supprimés sur les smartphones pour être remplacés par un menu dédié à ceux-ci.

Problème affichage menu vertical smartphone

En effet, le menu horizontal (haut de page) est accessible via l’icône (trois traits) en haut de page de l’affichage smartphone...
Ça ne me poserait pas de problème s’il en était de même pour le menu vertical, mais je ne le retrouve nulle part ! J’ai bien les quelques éléments de mon menu horizontal qui sont présents, mais mon menu vertical disparait !!!  😳
Arnaud

Problème affichage menu vertical smartphone

Tu utilises quel menu vertical, celui qui se déroule vers le bas ou celui qui se déroule vers la droite ?

Problème affichage menu vertical smartphone

Le menu qui se déroule vers la droite ...

Problème affichage menu vertical smartphone

menu vertical 2 art  🙂

Problème affichage menu vertical smartphone

Mais ce menu ne pourra pas passer sur les smartphones puisque il va se dérouler en dehors de l’écran.

Tu peux toujours essayer de mettre ceci dans un fichier /squelettes/styles/perso.css

.menudesktop {
    display: flex !important;
}
Problème affichage menu vertical smartphone

Bonjour Jean-Christophe... Tout d’abord merci pour tes retours ...
Grâce à ton aide, effectivement, le menu dépliant à droite n’est pas idéal pour l’affichage "smartphone" ! J’ai donc opté pour le menu vertical dépliant (inc-menu_vertical.html). En revanche, il ne s’affiche toujours pas en mode "petit écran" !
J’ai testé ton code mais malheureusement il modifie également l’affichage du menu horizontal et la mise en page du haut du site...
Maintenant que mon menu vertical est mieux adapté à l’affichage sur smartphone, je souhaiterai l’afficher sur ce mode !
N’y a t’il pas un code pour cela ? Quel fichier gère l’affichage en mode "smartphone" ?

Problème affichage menu vertical smartphone

Ok mais ce menu vertical dépliant se déplie au survol des entrées de menu et donc, ne fonctionne pas sur les smartphones ...

Je crois qu’il va falloir te passer du double menu.

Problème affichage menu vertical smartphone

Oui je sais, mais peu importe s’il ne se déplie pas, au moins j’aurais les rubriques à la racine !
Sur un autre site je travaillais avec "ScolaSpip" et ce menu s’affichait...
Je trouve Escal plus fluide et BEAUCOUP moins lourd...
Je voulais faire un nouveau site ressemblant à celui déjà en fonctionnement sous Scola, avec spip4 et Escal !  😢
Tout le reste répond à mes besoins, sauf l’affichage du menu, et je viens de m’apercevoir que le formulaire de recherche ne s’affiche pas non plus (dans ma config il est dans le bandeau).
Je n’arrive pas à trouver le fichier qui gère les affichages en fonction des dimensions de l’écran ! Est-ce dans le plugin Escal ou un autre plugin gère cela ?
Merci pour ton aide ...

Problème affichage menu vertical smartphone

OK on va essayer quelque chose : tu vas

  • copier le fichier inc-menu_vertical.html d’escal dans /squelettes/inclusions
  • dans ce fichier copié, modifier la première ligne
    <div class="menudesktop">

    en

    <div class="menudesktop menuVbas">
  • ajouter cette règle dans perso.css
    .menudesktop.menuVbas {
        display: initial;
    }
Problème affichage menu vertical smartphone

Sinon, pour info, l’affichage sur les mobiles est essentiellement géré par le fichier /styles/mobile.css et par quelques media queries dans d’autres fichiers css.

Problème affichage menu vertical smartphone

ça fonctionne !!!!! Merciiiiiiiiiiiiiiiiiiiii...
Tu es mon idole, voir un dieu !!!
Du coup t’as pas une petite idée pour le formulaire de recherche ?
Je sais je suis pénible !!! 😉

Problème affichage menu vertical smartphone

Merci pour cet élan de gratitude  😎

Ah oui, tu veux le formulaire de recherche dans le menu horizontal.
Et en effet, dans ce cas il disparait sur les smartphones.
Je vais faire un petit correctif pour régler ce souci.

Problème affichage formulaire recherche smartphone

Voilà, je viens de livrer le correctif.

Problème affichage menu vertical smartphone

👍👍 Se serait nickel s’il pouvait sortir du menu horizontal au changement d’affichage pour être visible en haut de page (mais pas dans le menu "3 traits" ...
Sur smartphone, il le semble que le formulaire est nécessaire rapidement... 😉
Mais ce n’est que mon avis de débutant !!!
Encore une fois un grand merci bien mérité ...

Problème affichage menu vertical smartphone

PS : il est où le correctif ?

Problème affichage formulaire recherche smartphone

C’est bizarre, tous tes messages sont en double.

Là, je ne vois pas comment faire pour le sortir du menu uniquement sur les spartphones. Tu tiens vraiment à l’avoir dans le menu sur les ordis ? Parce que si tu le mets dans la barre d’outils, le problème est réglé.

Le correctif est dans la version 4.5.11 qui sera disponible chez toi d’ici qq heures, le temps que les moulinettes spip fassent leur job.

Problème affichage menu vertical smartphone

Te prend pas la tête, je le mettrai dans la barre d’outils... 😉
Pour les messages, c’est moi qui les envoie 2 fois, sinon ils ne s’affichent pas dans le forum !

Problème affichage formulaire recherche smartphone

Ben si ... la preuve !  🙂

Réagir au sujet
Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre. Inutile de le poster à nouveau ;-)

Ajouter un document

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.14