Bonjour,

je suis actuellement en L1 info et je dois réaliser mon site pour la fin du semestre, mais je rencontre quelques petits soucis.

Quand mon site est en mode responsive, mon grid-template-areas est sous la forme
"header"
"principal"
"footer"

Dans mon header il y a : "Menu Nom-du-site recherche panier"

J'aimerais que quand je clique sur "menu" le grid-template-areas change pour se mettre sous la forme
"header"
"menu"

et que mon header remplace "menu" par une petite croix(pour sortir du menu une fois à l'intérieur) et aussi enlever "recherche" dans le header.

Je cherche donc un moyen de faire apparaitre le menu lors du click, j'ai cru comprendre qu'il fallait utiliser du JS mais je ne suis sur de rien.
Je ne sais pas non plus si il faut prévoir un autre grid-template-areas pour changer le format de la page.

J'espère avoir été assez clair, et je vous remercie d'avance pour vos réponses.

1 réponse


Bonjour,
navré te dire cela, mais il va falloire user du JavaScript ou du Php...
Tu peux aussi, avec header:hover dans ton css, créer une animation dès que tu passe la souris sur le lien déconseillé car les autres éléments ne bougeront pas !!!)
Bonne journée !