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.
10. Slack.com Style Responsive Navigation With Pure CSS – Slackie.css
Slackie.css is a pure CSS implementation of a responsive, mobile-friendly site navigation inspired from Slack.com.
9. Responsive Dropdown Nav Menu With Pure CSS
A fully responsive, CSS only multi-level navigation that automatically collapses the regular horizontal menu into a toggleable dropdown menu on small screens.
8. CSS Flexbox Based Responsive Navigation
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.
7. Responsive Multilevel Navigation with Pure JavaScript & CSS – menio
menio is a standalone, mobile-friendly JavaScript navigation system which automatically turns a normal horizontal multilevel menu into a vertical dropdown menu as the screen sizes reaches a specific breakpoint.
6. Minimal Responsive Dropdown Navigation In Pure CSS
A pure CSS multi-level dropdown navigation that will be converted into a mobile-friendly toggle menu in small screens.
5. Responsive Priority Navigation With Pure CSS
A responsive, CSS only priority navigation that automatically collapses overflowing menu items in a toggleable dropdown menu in mobile view.
4. Material Style Responsive Dropdown Navigation with Pure CSS
A pure CSS / CSS3 approach to creating a Material Design, fully responsive navigation menu with smartly aligned, multi-column dropdown sub menus.
3. Responsive Drawer Navigation In Pure CSS
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.
2. 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.
1. 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.