Informatique

Bonjour à tous,

J’ai un projet de site web à faire pour la fac et j’aimerais que quand on consulte le site sur mobile le menu (qui est un menu déroulant sur écran pc) s’ouvre et se referme via clic sur un bouton de menu de la gauche vers la droite

Je galère trop à trouver le bon code, j’ai vraiment besoin d’aide !

Merci d’avance à tous ceux qui pourront m’aider

Genre ça https://codepen.io/JollyRoger/pen/txrgF ?

Non pas vraiment, je voudrais le même menu que sur le site mobile de Comment ça marche mais la consigne est d’utiliser uniquement HTML et CSS et pas de Java

Y'a pas de Java dans son code ;)

Oui mais c’est pas le menu que je voudrais pour mon site

Alors ce que je t'ai envoyé c'est un truc responsive (pas moi qui l'ai fait) mais du coup si tu réduit la largeur de ton navigateur tu verra la version mobile. Et du coup c'est exactement le même menu que "le site mobile de ccm". Bon quand tu dis "pas de Java" je pense que tu veux dire pas de javascript (attention ce sont 2 langages différents). Du coup tu veux que le menu soit toujours comme ça ? Ou tu veux un site mobile et un site desktop distincts ?

C’est l’histoire du responsive design, en gros sur mon site version écran d’ordi j’ai un menu horizontal déroulant et je voulais mettre le même menu que sur ccm quand on réduit la taille de la fenêtre (qu’on la réduit à une taille d’un smartphone)

Ok beh avec ce que je t'ai envoyé t'as ce qu'il te faut. Mais du coup je ne vois pas comment ni pourquoi tu veux faire ça sans javascript. Tu vas devoir modifier des classes pour que ton menu s'"ouvre". C'est des fonctions hyper simples qui font :

Selectionne un élément
-Si sa classe est <ouvert>
    -sa classe devient <fermé>
-Sinon 
    -sa classe devient <ouvert>

Pas besoin d'être un génie en programmation ni de connaître vraiment javascript.

Pour la partie responsive il faut que te regarde ce que sont les media queries et comment ça fonctionne. Mais vraiment je suis sur que tu peux faire un grand copier coller de ce code, modifier un peu le css pour que le menu soit vertical et non horizontal, et tu as ce que tu veux. Ce genre de menu c'est hyper populaire et tout le monde le fait à peu près de la même façon.

Le 14 décembre 2017 à 20:16:30 KillaQueen a écrit :
C’est l’histoire du responsive design, en gros sur mon site version écran d’ordi j’ai un menu horizontal déroulant et je voulais mettre le même menu que sur ccm quand on réduit la taille de la fenêtre (qu’on la réduit à une taille d’un smartphone)

Utilise la balise @media en css pour spécifier le rendu selon la taille d'un écran.

C'est tout à fait possible de ne pas utiliser javascript, c'est d'ailleurs bien plus logique.

Je t'ai fait un jsfiddle: https://jsfiddle.net/s3812w92/

Tu dois utiliser la balise :focus et sélectionner les descendants.
Pour pouvoir :focus sur une div, il faut que tu lui ajoutes un tabindex. Dans mon exemple la première div.menu possède un tabindex mais pas la deuxième.

Le 14 décembre 2017 à 22:19:21 _S0uL a écrit :
Ok beh avec ce que je t'ai envoyé t'as ce qu'il te faut. Mais du coup je ne vois pas comment ni pourquoi tu veux faire ça sans javascript. Tu vas devoir modifier des classes pour que ton menu s'"ouvre". C'est des fonctions hyper simples qui font :

Selectionne un élément
-Si sa classe est <ouvert>
    -sa classe devient <fermé>
-Sinon 
    -sa classe devient <ouvert>

Pas besoin d'être un génie en programmation ni de connaître vraiment javascript.

Pour la partie responsive il faut que te regarde ce que sont les media queries et comment ça fonctionne. Mais vraiment je suis sur que tu peux faire un grand copier coller de ce code, modifier un peu le css pour que le menu soit vertical et non horizontal, et tu as ce que tu veux. Ce genre de menu c'est hyper populaire et tout le monde le fait à peu près de la même façon.

Tu serais surpris de voir tout ce qu'on peut faire uniquement avec CSS