On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.
What is a burger menu?
A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.
Why is it called a burger menu?
The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.
Why add a burger menu?
Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.
CSS only
Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.
The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.
What? I don't see it?
This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.
Inspiration
Like many things, I started by googling similar implementations, and found this snippet by Alvaro. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.