Note to self: Keep it simple!
I have a limited amount of global menu links on my website. When I re-designed it, I found that they didn't fit next to the site logo on small mobile screens. So, I decided to add a mobile menu triggered by a menu button.
When you click the button a full screen overlay fills up the screen with a nice animation. The menu links then appear neatly spaced out. Additionally, there is a button to close the overlay if you clicked on it by mistake. I also implemented a focus trap, so that users could not tab to any elements outside the menu while it was open and if they closed the menu the focus was gracefully returned to the button that had opened the menu.
I made sure that the menu was accessible with the correct semantic mark-up and it (and the buttons) had the correct ARIA labels.
I also made sure that if, for any reason, Javascript was not available there would be a fallback that wasn't too ugly.
I was quite happy with the result and the animation. But I had added two extra buttons and more than a 100 lines of clever (but fragile) CSS and Javascript.
The next morning I ripped it all out and just moved the global menu links below the site logo on small screens. That cost me a total of one media query, five lines of (robust) CSS and zero Javascript.
The moral of the story? Well, I'm not very good with extracting those, but I suppose you could say: if you notice that a small thing starts requiring a lot of complexity then it is possible that you are doing something wrong.
Simplicity is the most durable tactic.
Header image by Volodymyr Hryshchenko