As responsive web design quickly evolves, more and more usable solutions and patterns are emerging to help you easily build a navigation system for your site that will work seamlessly on both mobile devices and desktops.
In this post I’m going to take a quick look at some of those solutions and also share some useful resources to help get you on your way.
The most popular menu design trends are:
- Hambuger Icon Menu, which is a very popular option for both small and complex sites.
- Off-Canvas menu, where you hide your menu “off canvas” and reveal it when the menu button is clicked.
- Toggle Menu, which will transform your standard menu into an accordion on smaller screens.
- Overlay-Style Menus, which will either partially or fully cover the entire screen on both mobiles and desktops when clicked.
There are other less popular options, but these are the most common and deemed to be the best solutions. And it is these solutions that I’m going to take a look at today.
Responsive Navigation Plugins
Universal Responsive Mega Menu
The flexible Universal Responsive Mega Menu jQuery plugin offers up to twelve varied sizes of drop-downs and unlimited fly-out elements. Customization requires only some basic knowledge of CSS and the script includes a few options so that you can easily select which animation effect should be applied to the menu. Also, by changing just a single class you can use this system as a sticky footer as well.
If you’re looking for an app-like or off-canvas menu then you should take a look at the jQuery.mmenu plugin. It is very easy to customize and offers a wide range of options, extensions and add-ons that will allow you to change the opening and closing effects, change the color schemes, and also change the size and position of the menu.
Ultimate Burger Menu
Built on a grid system, the responsive and feature-rich Jet Megamenu can be optionally used as either a basic drop-down menu, or as a mega-menu. It comes packaged with 14 preset styles (it’s also very easy to create your own) and has been tested on all major browser, including touch-screen devices.
Optimized for mobile and touch devices, the Alpha jQuery plugin is a simple responsive menu system that has been styled in the very popular flat design style. On mobile devices, the fluid horizontal menu turns into a vertical menu which, just like the submenus, can be toggled with a single tap or click.
Fly Side Menu
The Fly Side Menu plugin is a unique responsive menu solution that recreates the impressive full-screen animation from Airbnb’s latest iOS app. It has been tested on both desktop and mobile versions of Chrome, Firefox and Safari, although, this plugin is more of a proof-of-concept than a production-ready responsive menu system, so please use with caution. Still, it does look amazing!
The Square Menu plugin, as you will be able to tell from the name, has been based on the animated menu from the new Square website. It also comes bundled with additional animation effects and a few options for adding extra functionality.
Built with Sass, FlexMenu is a fully responsive jQuery navigation plugin that gives you the option to choose between either an off-canvas menu or a toggle/drop-down-style menu when viewed on a smaller screen.
slimMenu is a lightweight jQuery plugin that has been built to create responsive and multi-level navigation menus on the fly. You’ll not have to struggle with media queries to create your responsive menus, as slimMenu will do the job for you and it’s only 5KB (2.5KB minified)!
bigSlide is a tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel menus. It will slide the navigation panel as well as any containers given the
.push class (or a class of your choosing in the settings).
The fully-responsive CMD Bomsect plugin will quickly add a full-screen and animated overlay menu to your website that looks fantastic on smaller devices. It does come packaged with twelve optional full-screen animations and five additional backgrounds colors.
Responsive Navigation Resources
Steven Bradley has published a four part series on Tuts+ that explored a number of responsive navigation patterns. The four tutorials looked into how to develop navigation systems yourself, and explores everything from top nav bars, through select dropdowns and footer patterns, to off-canvas navigations.
The essential resource ResponsiveNavigation.net offers many tips and some fantastic demos that show you how to structure your menu to help you build a better mobile navigation system. The site also offers a few helpful insights you should consider before planning and building your site’s menu.
Responsive Menu Tutorials
There are a multitude of responsive and mobile navigation learning resources available, to help narrow your search here are some of my favorites:
- Build a Top Bar Off-Canvas Navigation With Foundation 5.
- How to Build an Off-Canvas Navigation Layout With Bootstrap.
- Drop-Down Navigation: Responsive and Touch-Friendly.
- Slide and Push Menu Tutorial.
- Pull Down for Navigation.
- A Responsive Design Approach for Navigation.