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

Il faut utiliser du javascript, tu peux check comment c'est fait sur codepen par exemple

https://codepen.io/g13nn/pen/eHGEF?q=hamburger&limit=all&type=type-pens

Et pour détecter si l'utilisateur est sur mobile ou pc tu peux utiliser les media queries en css

Justement dans la consigne je ne dois pas utiliser de JavaScript car on ne l’a pas vu en cours ^^

Pour avoir une idée visuelle ce que je voudrais c’est le même menu que sur le site mobile de Comment ça marche

C'est pas possible en fait. Le html n'est qu'un langage descriptif donc il ne fera aucune action. Et le css ne permet pas une action après le click.

Tu peux utiliser un lien interne (#) vers l'objet qu'il faut animer et styler la pseudo-classe :target, par exemple en jouant sur sa position et en lui mettant une animation Exemple à l'arrache :
https://codepen.io/anon/pen/jYPVpN

Merci je vais tester ça

Le 14 décembre 2017 à 16:47:59 KillaQueen a écrit :
Merci je vais tester ça

Je t'ai répondu ici.
Le hack avec target est bien mais on peut également faire un focus

https://m.jeuxvideo.com/forums/42-47-54422580-1-0-1-0-menu-coulissant-avec-bouton-html.htm

Le 14 décembre 2017 à 13:46:11 dragonsgma a écrit :
C'est pas possible en fait. Le html n'est qu'un langage descriptif donc il ne fera aucune action. Et le css ne permet pas une action après le click.

Bien sûr que c'est possible, tu ignores la puissance de css et tu rajoutes du javascript pour rien

c'est possible avec la pseudo classe :target !
en mode normal tu mets un width de 0px/%/vw ce que tu veux, et au :target tu le fait augmenter avec une petite transition pour que ce soit plus sexy. ;)

En scss (j'crois qu'on appelle ça du SASS ?) tu peux le faire assez simplement non ?

.menuderoulant {
display: none;
}

.menu:hover {
.menuderoulant {
display : inline/qu'importe;
}
}