Salut,
Si tu veux "cliquer sur un bouton", tu ne vas pas pouvoir le faire en CSS, il faut utiliser du javaScript.
Display none onclick machin
Oui voilà, continue dans cette voie.
Une idée pour "remplacer" le "display: none" serait de lui donner une "position" et de décaler la div sur la droite pour la sortir de l'écran.
Au clic du bouton, tu la ramène sur la gauche pour la faire rentrer dans l'écran.
Je ne comprend pas bien ce qu'est la partie bleue, est-ce que c'est un menu latéral ?
Si oui, si tu veux éviter le javascript, on peut s'en sortir en CSS.
Dans ce cas, on ne va pas "cliquer" pour afficher la div, on va la "survoler" à la souri.
Au départ, tu lui donne une largeur de 40px, opacité à 0. Et au ":hover" tu lui donne sa vraie largeur, avec une opacité à 1.
Le tout en utilisant les "transition".
Essaies de commencer, et reviens si tu as une question sur un problème précis.

