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 Feb 14 2021
Table Of Contents:
Pure CSS Responsive Menus:
1. CSS Only Responsive Dropdown Menu – JMenu
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.
2. Pure CSS Mobile-compatible Responsive Dropdown Menu
A pure CSS responsive menu created by andornagy that automatically changes to a toggleable dropdown menu at a specified breakpoint based on CSS3 media queries.
3. CSS Only Responsive Hamburger Navigation
Yet another responsive, mobile-friendly hamburger navigation menu for your cross-platform web pages. Implemented with pure HTML and CSS/CSS3.
4. Multi-level Toggle Responsive Navigation Menu using Pure CSS
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.
5. Responsive Pure CSS Dropdown Navigation Menu
A fully responsive, CSS-only navigation that breaks down into a hamburger dropdown menu when the viewport size is smaller than a breakpoint specified in the CSS3 media queries.
Pure JavaScript Responsive Menus:
1. 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.
2. Responsive Collapsible Navbar In Vanilla JavaScript – Collapsible
The Collapsible library automatically collapsible the nav items into a dropdown menu with a hamburger toggle button, when there’s not enough screen space.
3. Responsive Multilevel Navigation Menu with Vanilla JavaScripts
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.
4. Responsive Show / Hide Navigation Menu with JavaScript and CSS3
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.
5. Responsive Dropdown Menu In Vanilla JavaScript
A Vanilla JavaScript responsive dropdown menu that will be converted into a hamburger toggle menu when the screen size is less than a breakpoint you specify in the CSS media queries. Smooth animation is based on CSS3 transforms and transitions.
More Resources:
To download more responsive menus for your modern website & web app, here are a few more resources available online: