Here is a constantly updated list of the 10 best JavaScript and CSS based Responsive Menus we published on CSSScript.com. All of these responsive menus will auto switch between regular site navigation and mobile-friendly navigation depending on the viewport size. I hope you like it and don’t forget to spread the world.
Originally Published Nov 17 2017, updated Nov 30 2018
1. Responsive Multilevel Navigation Menu with Vanilla JavaScript
A simple vanilla JavaScript responsive multilevel menu that performs as a dropdown reveal menu on smaller screen devices. Built using CSS, Vanilla JavaScript and apollo.js JS library.
2. Mobile-friendly Responsive Menu With JS And CSS3 Media Queries
A mobile-friendly and fully responsive navigation that uses JavaScript and CSS3 to convert the horizontal menu into a toggleable dropdown list when the screen size is less than a specific breakpoint.
3. Responsive Hamburger Menu In Pure CSS
This is a CSS only responsive, multi-level menu that expands the hamburger toggle button into a horizontal drop-down nav on the desktop or an off-canvas side menu on mobile.
4. CSS Only Responsive Dropdown Menu – JMenu
JMenu is a pure CSS responsive menu which automatically collapses the regular drop-down navbar into a mobile-friendly sliding menu with or without the toggle button.
5. Smart Responsive Sticky Navbar In JavaScript
A smart responsive sticky navbar that automatically slides down and hides as you scroll down or up the webpage.
6. Multi-level Accordion/Dropdown Menu In Vanilla JavaScript – metisMenu
This is the vanilla JavaScript version of the jQuery metisMenu plugin that helps you create responsive, animated, accessible, accordion/dropdown navigation on the web app.
7. Responsive Scrolling Navigation In JavaScript – Bungie Bar
Bungie Bar is an Apple.com inspired responsive navigation that collapses the long horizontal nav into a scrollable menu with left/right navigation arrows on mobile devices.
8. Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller
Priority Nav Scroller is a pure JavaScript plugin to create a fully responsive, arbitrarily-prioritized navigation menu following the Priority+ Navigation pattern.
9. Responsive Navigation System For All Devices – CodeHim Menu
CodeHim Menu is a responsive navigation system for all devices. Written in HTML and CSS.
10. Responsive Mobile-friendly Nav System With JavaScript And Flexbox
Yet another responsive, cross-platform navigation system that converts the horizontal menu into an off-screen hamburger navigation on the mobile device.