Bonjour à tous!

Comme mon titre l'indique, je cherche à créer dans un header, pour un format mobile, un menu nav qui se déroule suite à un clic sur un bouton "hamburger", sans aucune ligne de JS.

Pour ce faire je m'inspire de cet exemple: https://developer.mozilla.org/fr/docs/Web/CSS/:target qui utilise la pseudo-classe :target, afin d'afficher ou non un élément sur un simple clic sur un lien renvoyant vers une ancre.

Jusque là pas de problème, je comprends le concept, et j'arrive à faire la nav avec le comportement que je souhaite.

Par contre je rencontre deux problèmes:

D'une, de l'exemple ci-dessus, il y a une chose que j'aimerais utiliser, mais que je n'arrive pas à reproduire, parce que (du moins je pense que c'est la cause) je n'utilise pas de <figure>, c'est que j'aimerais que tout comme dans l'exemple, lorsque ma nav est visible, que le reste de ma page, soit grisée, mais aussi que si l'on clique en dehors de la nav, cette dernière se referme.
Comme dans l'exemple, j'ai essayé de le faire via un pseudo-élément ::before, sauf que ce dernier prends le dessus sur ma nav , et sur tout le document en fait, donc une fois ma nav affichée, celle-ci est elle même grisée, et je ne peux accéder à ses liens sans cliquer sur mon pseudo-élément qui a pour effet de refermer la nav.

J'ai bien conscience que je pourrais palier à ça, via un positionnement, en définissant un "top" d'une valeur de la taille de ma nav, seulement je ne veux pas entrer en dur une valeur en pixel, qui pourraient être à emmenée à changer, j'aimerais donc faire ça "proprement", en trouvant simplement un moyen de faire en sorte que mon header reste devant mon pseudo-élément exactement comme dans l'exemple en fait où la <figcaption> reste devant le lien .closemsg.

Deuxièmement, j'ai sur Mozilla un bug d'affichage sur mon "hamburger", où la barre du milieu est selon la taille de l'écran plus grande que les deux autres comme vous pouvez le voir dans l'image ci-dessous, or je ne vois rien dans mon code qui explique cela la valeur du width de la span formant la barre étant fixe. Si quelqu'un pouvait m'expliquer ce comportement que je ne vois que dans Mozilla et comment pallier à cela ça serait un grand soulagement, d'autant que le code dont je me suis inspiré (celui-ci: https://codepen.io/kevinpowell/full/zYvEKJx il faut réduire votre fenêtre pour voir l'hamburger) ne présente pas ce comportement...

Enfin voici mon code: https://codepen.io/valerio-fluo/pen/LYojrax

Si une âme généreuse et éclairée, pouvait m'apporter ses lumières, je lui serais très reconnaissant, parce que là ça fait un petit moment que je patauge sur ce problème. 

Bonjour,

z-index: -1; sur #nav-modal:target .closing-nav::before devrait suffire

En revanche, je t'invite à utiliser plutôt un système de "disclosure widget" avec capture du focus, car si on navigue au clavier, on peut sortir du menu déroulé en tabulant, sans l'avoir refermé. De plus, ton lien hamburger n'a aucun contenu, donc les personnes utilisant un lecteur d'écran ne pourront peut-être accéder au menu (je n'ai pas testé, j'ai juste remarqué qu'on ne peut pas tabuler dans les menus s'ils sont refermés, avec Firefox, et je ne sais pas si NVDA par exemple prononcerait la liste des liens…)

Un peu de lecture de qualité si ça t'intéresse : Disclosure widgets chez Adrian Roselli.

Hey merci beaucoup Lamecarlate,

Effectivement ça a marché et j'ai pu grâce à toi résoudre mon premier problème, en positionnant l'élément et en définissant son z-index sur -1.

Et oui ne t'inquiètes pas, je sais qu'en terme d'accessibilité, ce n'est pas top, mais disons que c'était juste pour l'exercice, dans le cadre d'une formation, je voulais absolument pour la forme proposer une solution sans JS. Or malheureusement, le disclosure widget se fait avec du JS.

Dans un cadre professionnel, j'aurais utilisé le JS, et me serait soucié de l'accessibilité.

Par contre, il reste un point non résolu dans mon problème, c'est cette barre du milieu de mon hamburger, qui une fois sur deux se retrouve plus grande que les autres, sur Mozilla, je ne comprends pas.

Edit: chose étrange, que je viens de remarquer, ce "bug" ne se produit que sur mon deuxième moniteur. Je travaille sur pc portable avec un deuxième écran connecter en HDMI. Je viens de faire l'expérience sur deux écrans différents, sur les deux écrans il y a ce bug qui apparaît que je change la taille du viewport, par contre sur l'écran même, de mon pc, la taille de la barre du milieu du burger ne change jamais.
Par contre, dans l'exemple: https://codepen.io/kevinpowell/full/zYvEKJx, la barre du milieu ne change jamais de taille, que ce soit sur l'écran extérieur, ou sur mon pc. Alors comment pourrais-je avoir ce comportement stable, du hamburger? Qu'est-ce qui diffère dans mon code, au point de créer cet espèce de bug visuel?

-
Edité par ValerioFluo 9 juin 2024 à 23:05:38

Je suis en train de regarder, c'est très étrange. Je pense que ça a un rapport avec la manière dont Firefox calcule les demi-pixels (les trois barres font 22,4px de large dans ton exemple), mais j'avoue que je n'avais jamais remarqué de différence entre les éléments et les pseudo-éléments. Dans l'exemple de Kevin Powell, les barres font 24px de large car le bouton fait 3rem et non 2,8rem. Mais je me dis que ça tombe juste… juste, c'est un hasard, parce que si je change ma taille de police de navigateur de 16px à 13px, 3rem n'est plus égal à 48px, et je reproduis le même effet sur l'exemple. Ou bien si on change la largeur du bouton dans l'exemple de Powell, de 3 à 2,8, on retombe sur le même souci que toi.

Je continue d'investiguer, pourquoi on aurait un calcul différent dans les pseudo-éléments, ça m'échappe.

Edit : il semblerait que ça soit lié au transform ! Si je place les pseudo-éléments avec position: relative et top et bottom, leur longueur est la même que celle du parent. Je continue de chercher si on n'a pas plus élégant comme correction.

-
Edité par Lamecarlate 10 juin 2024 à 8:56:09

Ok merci beaucoup pour cet, éclaircissement, donc en gros si je comprends bien, pour l'instant, la solution pour éviter ce problème serait d'avoir une valeur pour la largeur du bouton multiple de 2, afin que mon 50% tombe juste ou de positionner au lieu d'utiliser un transform.

Merci c'est déjà beaucoup, mais si jamais tu trouves, pourquoi les pseudo-éléments sont calculés différemment, ça m'intéresse aussi s'il te plaît, j'aime pas rester sur un comportement incompris

Pour moi le plus sûr est d'utiliser top et bottom et non transform, plutôt que changer la taille du bouton, parce que tu ne sais pas quelle est la taille de police choisie par l'utilisateurice (il y a 99% de chances que ça soit 16px maiiiis on a des surprises).

Parallèlement, oui, je continue de chercher pour la raison de cette différence de calcul, c'est assez incroyable. (je précise que je ne pense plus que ça soit les pseudo-éléments, mais le transform qui cause ceci, mais il me faudra tester)

-
Edité par Lamecarlate 10 juin 2024 à 18:08:01

@Tabasse 1 sexagenaire Bonjour, merci de ne pas squatter le sujet des autres, créer votre propre sujet dans le respect des règles du forum à savoir que le code que vous avez écrit doit être inséré sur le forum à l'aide de l'outil d'intégration de code soit le bouton code </>.

Et passez votre code au validateur pour voir et corriger les erreurs de syntaxe => https://validator.w3.org/