Discussion :

[fred-zen]

Bonjour,

Je doit faire un site pour ma femme qui se met en libérale. Le site : http://ergo.maria.brachot.fr/
Sur un PC (grand écran), j'ai fait un menu avec des boutons qui permettent d'aller d'un page à l'autre.
Mais pour les smartphones ou fenêtre de navigateur réduite, je masque les boutons et met un bouton "burger" pour faire apparaître le menu.
J'ai vu qu'en CSS3 il était possible de faire des animations, j'aimerais que lorsque l'on clique sur le bouton que le menu apparaisse de la gauche vers la droite comme pour ce menu : https://support.google.com/webmasters/answer/6352293

Par défaut le menu est caché à l'aide du code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#burger[aria-expanded="false"] + #menu_burger
{
	display: none;
}

Lorsque l'on clique sur le bouton "burger", la propriété aria-expanded est passée à true et le menu apparaît.

Quelqu'un sait il comment faire cela en CSS ?

[NoSmoking]

Bonjour,
l'exemple que tu nous montres est géré par JavaScript et non CSS.

En CSS on peut faire beaucoup de chose comme par exemple : Panneau latéral coulissant, mais pourquoi vouloir changer ce que tu as réalisé.

[fred-zen]

Merci pour ton retour.
L'exemple que j'ai donné n'est pas de moi, c'était pour montrer le résultat auquel je voulais arriver.
Je souhaite faire cela pour que la navigation sur le site soit plus "sympa" et pour apprendre à utiliser les nouvelles possibilités du CSS3, je ne souhaite pas écrire une fonction javascript pour cela.

Je vais voir si je peux adapter l'exemple que tu m'as donné au site que je fais.
Merci

Fred

[fred-zen]

Grace à ton exemple et en faisant des tests, j'ai compris pourquoi mes premiers tests n'avaient pas fonctionné.
Quand on laisse la partie de style que j'avais mis dans mon premier post (avec display: none), lorsque le menu s'affiche il apparaît directement à la position cible sans effet de translation.
J'ai supprimé cette partie de style et j'ai ajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#burger + #menu_burger
{
	transform: translateX(-100%);
}
 
#burger[aria-expanded="true"] + #menu_burger
{
	z-index: 90;
	transform: translateX(0px);
	transition: all 0.5s;
}

Et là j'ai bien le résultat voulus

Par contre sur mon bouton j'affiche une étiquette lorsque l'on passe la souris sur le bouton, avec cette modification l'étiquette ne tiens plus compte du niveau (z-index)
Je n'ai pas compris pourquoi, mais j'ai du supprimer la propriété z-index de l'étiquette pour qu'elle ne s'affiche pas au dessus du menu (alors que celui-ci avait bien une valeur z-index supérieur à l'étiquette).

Merci pour ton aide,
Fred

[NoSmoking]

Je n'ai pas compris pourquoi, mais j'ai du supprimer la propriété z-index de l'étiquette pour qu'elle ne s'affiche pas au dessus du menu (alors que celui-ci avait bien une valeur z-index supérieur à l'étiquette).

Bien que dans bien des cas la gestion du z-index s’avère une chose « relativement aisée » il est des cas biens plus complexe à comprendre !

• Ce que personne ne vous a jamais dit à propos de z-index

[fred-zen]

J'avais été voir sur les sites : https://developer.mozilla.org/fr/docs/Web/CSS/z-index et et https://www.w3schools.com/cssref/pr_pos_z-index.asp
Mais il est vrai que je n'avais pas été voir les spécifications complètes.

Merci pour ton lien très intéressant