Responsive: Étendre le menu hamburger à des écrans plus larges

[Solie]

Sur la version responsive de Malaga,
le menu prend beaucoup trop de place.

Auparavant, j'avais sept pages en premier niveau de navigation. Mais le menu est apparu sur deux lignes en version responsive. Et oui, plus l'écran est petit, plus la police est grosse... J'ai complètement repensé l'ergonomie, et j'ai pu réduire le menu à cinq pages. Malheureusement, ça n'est pas suffisant. Au-delà de quatre pages, ça passe sur deux lignes.

Le menu "hamburger Icon" n'a bizarrement pas été prévu pour des écrans un peu plus grands que les smartphones (tels que l'iPad Mini ou même l'iPad normal en position portrait).

Comme avec la plupart des sites actuels, les barres de menu des sites de Frédéric (Filmsde<3) ou de Florian (Zetuto) répondent bien aux critères de la navigation responsive (Cf. tests sur iPad normal). Orientation portrait = menu mobile, orientation paysage (landscape) = menu complet. J'ai inspecté leurs sites mais ils sont en designs perso...

Tout ce que j'ai cru comprendre, c'est que je dois mettre sur mon menu mobile ( jtpl-mobile-navigation ?? ) une balise @media avec un (max-width: 867px) au lieu des 767px de Jimdo, puis aussi empêcher le menu complet d'apparaître à 768px avec un min-width à 868px afin d'éviter une superposition des deux éléments... Ça fait quelques semaines que je galère avec ça, et je ne retrouve ni les valeurs de Jimdo, ni le menu mobile avec l'inspecteur sur la version responsive de mon site.


Toute aide sera bienvenue

Merci

[FilmsdeLover]

Les media queries @media sont assez "simples" à comprendre une fois qu'on a pris le pli mais faut être méga organisé. Je me souviens avoir du prendre du papier quadrillé pour faire les différents types de configuration.

Dans ton cas précis, j'ai regardé un peu ton code et j'ai l'impression que tu n'as pas besoin de passer par des media queries. Essaye de modifier la margin de .jtpl-navigation en la passant de 3rem à 2rem (ligne 87 de ta feuille CSS apparemment). Je n'ai pas l'impression que ça change grand'chose sur le menu en lui-même et surtout, ça enlève les deux lignes de menu pour la dimension de site qui te pose problème. J'ai testé sur Firebug en rétrécissant mon navigateur et ça semble fonctionner.

[FredVig]

Je suis d'accord avec FdL, c'est en agissant sur les propriétés de .jtpl-navigation que tu pourras régler ce problème. tu peux agir aussi sur la min-width.(augmenter)
C'est assez étrange d'ailleurs la façon dont la barre de nav est gérée sur ton site. je ne parviens pas à voir si cela est dû à des erreurs dans le code d'origine ou dans une feuille de style perso. Par exemple, il y a une propriété flex, donc les valeurs margin devraient être proportionnelles et non fixes, il me semble.

[Solie]

La barre de navigation fixe de Malaga, qui ne s'appelle plus .topbar mais .jtpl-header, a causé quelques problèmes sur smartphones en responsive. Les développeurs ont été réactifs aux retours, et ont retiré sa position "fixed" pour l'affichage hamburger, afin qu'elle ne se fixe plus par-dessus le content sur les mobiles. J'ignore si les bizarreries que tu notes FredVig, viennent des corrections successives de bugs. De mon côté, j'ai juste remis une petite ombre box-shadow au bas. Je ne crois pas avoir ajouté de codes à valeurs fixes. De toutes façons, je maîtrise mieux le pourcentage que les px. Et flex:1, je ne sais même pas ce que c'est ^^

Merci beaucoup de m'avoir proposé cette solution Filmsde<3.
Ça me dépanne bien ! Effectivement, le réglage à 2rem est suffisant pour l'iPad.

Je demanderai à un pote si ça passe aussi sur son iPad mini. Sinon, je baisserai encore la valeur. Pour la version en espagnol, les mots étant légèrement plus longs qu'en anglais, j'ai dû descendre à 0rem. En négatif, le menu sort du cadre... Alors la version française ne passera pas. Toujours pas envisageable de basculer mon site principal en responsive, donc  

Je vais peut-être demander à Jimdo s'ils prévoient de faire évoluer cette barre de navigation pour qu'elle accepte plus de quatre titres en position portrait...

Merci encore à vous deux

[FredVig]

Dans ton menu, tu pourrais aussi limiter largeur du logo pour gagner en place. Par exemple en lui donnant une largeur équivalente au minimal nécessaire (pour le logo) lorsque la largeur de fenêtre est à la limite de passer en hamburger, soit :

Code:

jtpl-logo { width: 16vw;}

Pour comprendre flexbox, il y a cet article :http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
C'est un ensemble de propriétés très puissantes pour positionner les éléments en proportionnel. Elles permettent des choses impossibles autrement, et elles sont utiles au responsive, très bien supportés par les navigateurs en plus.

[Solie]

Merci pour l'article. Ça pourrait peut-être s'appliquer au module Image pour la responsivité en pleine largeur sur le content. Pour corriger cela, je replace actuellement toute image en pleine largeur, seule, dans le module Galerie. Là, la responsivité est bonne.

---

J'ai testé le code du logo hier soir. Il décale effectivement les titres de menu sur la gauche. Mais ceci a l'inconvénient, même à 20vw, de réduire aussi la hauteur de la barre de navigation. Ceci poserait un souci pour toutes les ancres du site, paramétrées en fonction de la hauteur de de la barre fixe de Malaga. Ça m'enchante moyen de tout repositionner.

Je pense définitivement que Jimdo devrait étendre le menu hamburger de ses designs aux écrans intermédiaires.

[FredVig]

C'est une préconisation censée.
Il faudrait toutefois vérifier si cela ne crée pas d'autres soucis.
Si tu veux essayer, c'est assez simple :
inspecte ton site depuis firefox et repère la feuille de style (onglet éditeur de style) qui inclus les @media (min-width: 768px) (sur mon design, c'est layout.css)
puis, remplace tous les (min-width: 768px) par une valeur plus grande (868px par exemple)
("rechercher : @media"une colonne à droite permet d'accéder à toutes les occurrences)
remplace aussi les max-width:767px) par la valeur correspondante (867px)
copie le code et colle l'intégrité dans ton modifier le head…
J'ai fait l'essai sur mon site

[Solie]

J'ai bien compris qu'il fallait faire tout cela (cf. mon premier post). Mais je ne suis pas capable de rédiger le code ! De mémoire, moi aussi c'est layout...



Ton icône hamburger sort un peu du cadre mais la navigation a l'air de fonctionner Comment tu as fait pour colorier le steak en rouge ? Moi je n'avais réussi à colorier en orange que les tranches de pain !

[FredVig]

Je n'ai rien fait pour la couleur du hamburger, ça doit être par défaut. Mais ce design est beuggé de toute façon à la base. Il faut corriger une à une toutes les couleurs d'éléments actifs.

Mais je ne suis pas capable de rédiger le code

Moi non plus. J'ai seulement recherché-remplacé la valeur des min-width et max-width sur le code de layout.css, puis, tout collé (toute la feuille!) dans mon modifié le head.
C'est juste pour tester

[Solie]

Dans ce cas, tu pourrais peut-être coller ici ce que tu as mis dans le head ? Que j'essaie de décortiquer

[FredVig]

Mais…
ça ne fonctionnera que pour mon site. Tu dois prendre ton site comme modèle.
Et puis, ça fait 1200 lignes !
ça dépasse la longueur autorisée.
SI tu vas sur mon site, je l'ai collé à la fin de la feuille perso 9 à partir de la ligne 482 jusqu'à la fin

[Solie]

Bon... Je ne sais pas où j'ai merdé mais j'ai réussi à supprimer le menu mobile !
J'ai passé quatre heures là-dessus, à reprendre toutes les valeurs @media les unes après les autres. Dans Firefox, dans un doc à part avec ctrl F, je n'en ai pas raté un @media dans ce millier de lignes. J'ai recommencé dix fois depuis le début. C'est certain, j'ai dû zapprr la box animée qui n'apparaît pas au clic.

https://i.servimg.com/u/f84/19/21/73/06/image15.jpg

Ça m'agace parce que tout le reste est clean. Position Portrait OK, POSITION Paysage OK. L'icône Hamburger est bien présente sur le site espagnol . Elle me nargue ! Elle sait bien que je ne comprends rien !!! Si seulement le menu mobile marchait...
Niveau rendu affichage , c'est pile poil ce qu'il faudrait  sur nos sites Jimdo.

[FredVig]

Aïe !
il doit y avoir une ligne perso ancienne qui fait bugger tes nouvelles @media.
Les deux sites (espagnol et français) sont sur le mËme design ça devrait fonctionner pareil.
Je regarde…
Bon déjà un détail qui n'a rien à voir : tes menus sont tout bizarres dans firefox. faudrait enlever le bold à tes polices (par exemple)

[FredVig]

Les différences que je décèle entre les deux sites sont :
- le nom de la feuille de style principale comprenant les @media :
unresponsive pour voixoff
web.css pour vozenoff
Lorsqu'on supprime toutes les feuilles de styles perso, le responsive ne fonctionne pas sur voixoff. (resterait-il d'une façon ou d'une autre une "version mobile" de l'ancienne structure jimdo activée ?

- La feuille personnalisée (17) que tu as créée pour le site espagnol n'est pas visible sur le site français.

- Une CSS spécifique /* styler version mobile */ est sur le site français mais pas sur l'autre. Je ne sais pas trop ce que les .mobile peuvent faire comme conflit avec les @media (min-width:768px)

Voilà pour un début de recherche. Je pense qu'il y a une différence structurelle entre les deux sites. Sont-ils du m^me design ? sont-ils à jour structurellement ? reste-il une version mobile activée sur l'un d'eux ?

[Solie]

Un détail qui n'a rien à voir : tes menus sont tout bizarres dans firefox. faudrait enlever le bold à tes polices (par exemple)

Ouais c'est degueu... Je pensais que c'était Firefox qui lisait mal la police Julius. Merci, je vais corriger ça  

Je n'ai pas encore basculé le site français en responsive. Je souhaite d'abord régler les inconvénients de "Malaga responsive" avant de faire cette manip. Mon site est toujours sur le modèle Malaga d'origine (ancienne structure) avec sa version mobile originelle activée dans les paramètres.

Le site espagnol est un VRAI NOUVEAU SITE, créé en novembre, complètement distinct du site principal français. Dès sa création, il était d'office sur la toute nouvelle structure responsive du design Malaga.

La version anglaise par contre (lien dans premier post) est une copie totale du site français, demandée à Jimdo en janvier (via le pack multilingue). C'est moi qui, juste après la copie, ai basculé ce site en responsive. Choisir un autre design et l'enregistrer, puis choisir Malaga.

C'est pourquoi, dans l'optique de basculer mon site français, je fais des tests sur les versions "Malaga Responsive", de préférence l'espagnole, qui ne peut pas avoir de séquelles de l'ancienne structure qu'elle n'a jamais connue.

Si le visuel est le même, oui, il y a une énorme différence structurelle entre les deux versions de Malaga. On peut considérer que Jimdo a fait deux designs différents, et qu'ils procèdent ainsi pour chaque design de leur catalogue. C'est un travail titanesque.

Pour en revenir à nos moutons, mon site espagnol est sensé est le plus propre de tous. C'est moi, la tache. J'ai copié toute la feuille layout.css mais un truc a buggé.

[FredVig]

Mais ?
Il fonctionne le responsive de l'espagnol, où est le soucis ?
Tu es parvenue à passer le design mobile à 868px…
Ha !
Ok, le menu a disparu

[Solie]

Il n'y pas de gros soucis sur le responsive en règle générale (à part sur les images dans le module image mais ça se corrige avec le module galerie qui gère super la responsivité).

Il y a un souci sur les menus de tous les designs responsive, parce que Jimdo n'a pas étendu la barre de menu hamburger aux écrans intermédiaires, lesquels ne supportent plus le menu complet, devenu trop gros.

Le code que tu m'as conseillé, je l'ai mis dans le head du site espagnol. Or, le menu a disparu. Clique sur le hamburger, tu verras...

EDIT / je viens de répondre à un message qui a disparu

[FredVig]

il semble qu'une } soit mal placée :
ligne 438

Code:

@media (min-width:868px) {
        #jtpl-navigation__checkbox:checked+.jtpl-main .jtpl-section-aside::after,#jtpl-navigation__checkbox:checked+.jtpl-main .jtpl-section-main::after,.jtpl-mobile-navigation,.jtpl-navigation__label {
                display:none
        }
/* la } suivante ne doit pas être là mais avant le prochain @media, ligne 458*/
}
.jtpl-mobile-navigation
ul {
        display:block
}

pour ce problème en particulier, ça doit le faire.
EDIT : Mouais, c'est pas si simple en fait…

[FredVig]

Si tu dois procéder ainsi (copier toute une feuille de style et remplacer toutes les occurences de @media) je te conseille d'utiliser un logiciel d'édition de code, comme sublime text.
Tu pourras faire des "rechercher-remplacer" dans tout le code de plusieurs fichiers à la fois en un seul clic…

[Solie]

Merci ! Je regarde ça ce soir

[FredVig]

Quelques heures et milliers de lignes de code plus loin, je confirme que ce n'est pas si simple.
Certains @media du Layout surpassent ceux que l'on peut mettre en feuille de style, donc, il faudrait essayer de trouver ceux qui gênent et ajouter des !important.

Pour tenter d'y voir clair, j'ai regroupé les @media en deux groupes (petite phrase … longues heures de copié collé), mais ça ne suffit pas à voir d'où vient le problème.

ça sent le design perso…

[FredVig]

Je n'ai trouvé qu'une solution assez bancale :
Copier tout le contenu de layout + tout le contenu de web.css
remplacer les 768px et les 767px par les nouvelles valeur
ajouter au début

Code:

@media (max-width:867px) {
        .jtpl-mobile-navigation{display:block!important;}
}

Coller tout ça dans le modifier le head
Je ne comprend pas comment fonctionne layout, car de très nombreuses lignes de codes sont dupliquées.
Par ailleurs, j'ai tenté de ne garder que les @media afin de réduire le code, mais cela ne fonctionne pas. il y a un comportement subtil qui utilise l'ordre de lecture des css. une même propriété peut avoir plusieurs valeurs différentes sur la même feuille, du coup, c'est la dernière valeur qui est prise en compte.

[Solie]

Ce fut très très long ! Plus de 6000 lignes de code dans web.css quand-même...

Le menu fonctionne au clic
Mais on voit déjà que les colonnes déconnent...



projet espagnol

J'envisageais aussi de ne garder que les @media. Merci d'avoir fait le test

C'est vrai que laisser un code de près de 8000 lignes dans "Modifier le head" juste pour étendre le menu hamburger de 100px, ça fait un peu peur.

Je crois que je suis bonne pour maintenir mon site principal en "no responsive" pour un moment.

Je crains en effet que Jimdo n'attende de recevoir assez de plaintes de ses abonnés. Vu le peu de designs en responsive actuellement, il va falloir être patients...

[Solie]

Oui, c'est peu encore. Le temps que les utilisateurs basculent, puis vérifient la responsivité de leur site sur les écrans intermédiaires (s'ils le font!) ça prendra bien six mois pour les premières plaintes

C'est toi qui as fait le boulot de psychopathe en étudiant en amont ces milliers de lignes de code ! C'est toi qu'il faut féliciter

[FilmsdeLover]

8000 lignes de codes ??? Punaise, et moi qui pensais que les 400 lignes de mon design perso étaient beaucoup.

[Contenu sponsorisé]