What is responsive menu?
A responsive menu will automatically transform the regular horizontal site navigation into a responsive, mobile-friendly navigation menu for cross-platform websites and web apps.
Why you should use a responsive menu?
With the popularity of smartphones, more and more users browser website through mobile and tablet devices. And Google announced that Google predominantly uses the mobile version of the content for indexing and ranking.
In order to provide a better user experience, you might need a responsive menu system for your websites or web apps accoss the devices and platforms.
The best responsive menu
Originally Published Nov 17 2017, updated June 25 2018
Table of contents:
jQuery Responsive Menu Plugins:
Smart Menus is jQuery Navigation Menu Plugin for creating responsive and Cross-platform multi-level drop down menus for your navigation.
slicknav is a simple and easy-to-use jQuery menu plugin for creating a responsive & cross-browser multi-level navigation menu on your website.
Stellarnav is a responsive dropdown menu plugin for jQuery that supports infinite levels of sub menus and auto switches to a small screen friendly toggle menu when the window width reaches a specified breakpoint.
A responsive navigation menu that automatically clips overflowing menu items and adds them into a dropdown list when not enough space is available.
A JQuery/HTML5/CSS3 based responsive navigation system that transform your regular horizontal nav bar into a mobile-friendly toggle menu.
Vanilla JS Responsive Menu Libraries:
A mobile-friendly responsive navigation system that uses CSS3 media queries to detect the screen size and transforms the regular horizontal navigation into a show / hide menu with a toggle button on small screens.
Pure CSS Responsive Menus:
A pure CSS mobile-friendly navigation that automatically transform your horizontal navigation into a toggleable vertical accordion menu on smaller screen devices, with support for unlimited sub menu items.
A responsive navigation solution which uses input:checked pseudo selector to reveal a drawer menu sliding from the left or right hand side of the screen. You can change the breakpoint through media queries in the CSS.
A CSS only responsive site navigation that automatically converts the normal horizontal nav into a sliding hamburger menu. Based on CSS transition, flexbox and checkbox+label tricks.