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.
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