"Stop talking about stuff, and just go and DO the stuff!" - Gavin Strange
I recently attended the annual Web Dev Conference in Bristol’s Watershed, to indulge in all things that keep us web developers happy. Gavin Strange, senior designer for Bristol’s Aardman Animations and overall master of graphic design, was speaking at the event. After seeing his inspirational talk on getting excited and enthusiastic about everything you work on, I started playing around with a thought that had been on my mind for a while; to use a different way of interacting with a menu that makes it faster and more seamless when viewing on mobile devices.
Typically, on the mobile version of a site, you tap on a hamburger icon to open the menu. My goal was to change this so that when you press your finger on the icon and drag it down, the menu items come out from the side, with the link closest to your finger being the most prominent. When you let go with a link highlighted, the browser will navigate to that page - or close the menu if nothing was selected.
Check out the demo here - don't forget to try it on a mobile! :) - and have a look at the source code on Github.
Unfortunately, this menu doesn't come without its little glitches. The main problem on iPhone's Safari for example is that dragging your finger next to the edges of the screen causes it to go forward/back through the browser's history. If anybody has found a workaround for this, let us know in the comments!