Bonjour,

Je cherche à créer une sidebar verticale dans laquelle pourra apparaître menu / settings / autres. Je voudrais faire cette sidebar uniquement en CSS, que la sidebar prenne toute la hauteur de la fenêtre, soit fixe, soit "rétractable" et soit animée lors de son glissement.

Voilà ce que j'ai pu faire : https://codepen.io/anon/pen/KRbLGo

Malheureusement, je suis bloqué car je ne peux pas animer la propriété right de ma div "menu", en effet cette propriété passe d'une valeur pre-calculée à une valeur que le navigateur devra calculer (initial), cela semble poser problème pour la transition.
Évidemment je pourrais simplement fixer la largeur de cette div afin de ne pas avoir à lancer de calcule mais le but est aussi d'avoir une barre de largeur variable.

Une idée ?

Et en spécial bonus, je suis aussi preneur si vous arrivez à la faire fonctionner en position sticky plutôt que fixed afin d'ancrer le bouton plus bas.

EDIT : simplification du HTML/CSS.

Finalement j'ai fait un compromis. J'ai décalé mon menu sur la gauche de mon max-width. Il met un peu de temps pour apparaître car il doit parcourir de la distance hors de l'écran quand il est plus petit que la max-width. J'ai tenté d'ajuster ça avec une transition rapide au début puis plus lente vers la fin.
 
Résultat : https://codepen.io/anon/pen/BxvgZr

Je viens de forker ta sidebar et j'arrive à ça en jouant avec des labels + checkbox (qu'on ne voit pas). Ça utilise les vw pour la taille de la sidebar
 
https://codepen.io/anon/pen/QrRzNm

Oui mais les vw ça ne me va pas, le but c'est d'avoir une sidebar qui aura une largeur définie par son contenu sans excéder 320px et qui pourra occuper, au besoin, toute la largeur de l'écran sur les petites résolutions.
De plus, son contenu doit être fixe et donc suivre avec le défilement vertical.

Au final je me suis accordé sur quelque chose du genre : https://codepen.io/anon/pen/pVmmwv

Avec, en effet, toujours le problème que pour cacher la sidebar je la déplace vers la gauche du maximum de la largeur qu'elle pourrait faire. Mais je n'ai pas d'autre solution puisque je ne peux pas calculer sa largeur dans la propriété "left" et que pour une transition je suis obligé de passer d'une valeur connue à une autre valeur connue.
Il me reste à gérer le contenu de la sidebar par rapport à sa hauteur, mais avec ton idée de vw j'ai mis un vh de 100 et je pense qu'un défilement vertical à l'intérieur devrait faire l'affaire.

EDIT : sinon le coup de le checkbox est intéressant comme idée, je vais peut-être aussi voir de ce côté là.
EDIT2 : avec checkbox je trouve en effet l'idée meilleure : https://codepen.io/anon/pen/NMZPOB