One of the biggest headaches you’re likely to encounter as a developer is cramming a designer’s gigantic menu onto a mobile screen.
There are options open to you: you could repurpose the menu for mobile, you could compact it with JavaScript, you could even reposition it with CSS. But thanks to the amazing jQuery community, you probably don’t need to.
There are dozens of jQuery mobile navigation solutions available, all of which have been designed to solve the problem of menus that don’t fit on a phone. The only difficulty you’ll have in solving this problem is which plugin to choose, here are ten of my favourites:
slicknav
slicknav is packed with mobile awesomeness: It features multi-level menu support, the markup is nice and clean, and it degrades gracefully if someone has foolishly disabled JavaScript.
jPanelMenu
This plugin features a simple sliding-drawer style menu. It’s a well established design pattern with a proven track record on mobile.
jQuery Navobile
jQuery Navobile is one of my favourite jQuery solutions for mobile navigation. It’s another sliding-drawer style menu, but it’s incredibly easy to implement, and includes swipe support.
Snap.js
Snap.js (not to be confused with Snap.svg) is one of the most interative navigation options available. I love the option to drag either left or right — why impose right-hand browsing? Users who browse with either thumb will really appreciate this one.
Naver
Naver is a simple to implement jQuery plugin. On desktop you get a simple navigation bar, but on mobile you get the burger icon menu method. Helpfully, Naver keeps UX high by labelling the burger icon as ‘Navigation’.
Mmenu
Mmenu is one of the most sophisticated mobile menu options. It uses the burger icon to indicate its presence, and there’s a cool animation when the burger icon transforms into the close icon. Not very flexible, but really close to an app experience if that’s what your client demands.
ReSmenu
This plugin is an incredibly light (~1kb) solution that simply converts unordered lists into select elements in mobile viewports. This is a great option if you have a lot of links, and using the select element means you can be sure your users’ OS will handle the UX for you.
Pikabu
I love Pikabu and not only for the name. This amazing plugin is useful for all kinds of content, it’s almost a waste to use it for navigation, but if you need to include complex navigation, like a clickable diagram, this is the way to go.
Menutron
Menutron is another plugin for converting lists to select elements. In this case the plugin handles definition lists as well as unordered lists.
jQuery Fly Side Menu
For sheer visual excitement, it’s hard to beat this plugin. Perhaps not ideal on a commercial site, it’s a great alternative to sliding-drawer menus.
