10 free jQuery mobile menu plugins

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.

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter. More articles by Paddi MacDonnell
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress