Extract from SitePoint article “Building Great Mobile Menus for Your Website” by Simon Codrington
Websites need to look great and have optimal functionality, regardless of whether they are viewed on a laptop, tablet all mobile phone. Developers are adapting to a mobile-centric design philosophy with a focus on creating legible sized fonts, making images responsive, adapting content to fit etc. However, menus themselves are often neglected or overlooked. In this tutorial I will explain how to create mobile friendly menus.
Mobile menus and their importance
Mobile menus have specific considerations:
Smaller device sizes
There is less physical space, meaning a way is needed to organize the menu and its links in an easy to use way. Mobile menus achieve this by either customizing the main menu or showing another menu exclusively for mobile devices (such as on phones or tablets)
These mobile menus should be free from clutter and appropriately sized, allowing users to navigate through them with ease.
Touch screens and interactivity
Developers have long relied on pseduo states such as :hover and :active to create interactive drop-down menus. On touch screens these either don’t work reliably or don’t work at all (you can’t hover over a link and expect its child sub-menu to appear below it for example).
Speed and responsiveness
Navigation is more important on a mobile device and since menus have become the default location where users clicks to navigation, it’s crucial that menus are as quick as possible. Nothing is worse than opening a menu and watching it slowly animate, chopping and sliding its way open or closed!
A mobile menu should be as swift as possible (with embellishments where appropriate)
Powering menu animations – CSS or jQuery
When it comes to animations for your mobile menus, there are two main methods:
- CSS animations: Use either CSS transitions or transformations to
manipulate your menus and animate them. - jQuery: Use jQuery’s animate functions to animate your menu.
While both methods will work, there are considerations to evaluate before you choose which way to proceed.
Cross browser compatibility
Unlike desktop environments where the limitations of Internet Explorer are still an issue, the mobile landscape is dominated by Chrome, Safari and Firefox and thankfully most of these browsers are capable of animations.