CSS Sliding Menu

I made a CodePen to roughly replicate the gmail menu behavior where hovering over the left menu slides it out to cover the main content, but clicking the hamburger icon locks it out in extended mode.

A bunch of good learning happened here. Got started with Grid Garden which was a very nicely done visual and interactive introduction to some of the contents.

Also I can't speak highly enough about CodePen and the benefit of a fast iteration cycle. Way better than my usual web prototyping involving a local python http.server and lots, and lots of reloads.

Hopefully I find a good use for this because I really like how it turned out, and especially that I was able to do it all with just plain javascript and without needing any external libraries.

There certainly are ways in which it could be nicer. For example the menu items are not complete (e.g. icon + text), but this proofs the point and is good enough for now.

css  js