Top 10 JavaScript & CSS Responsive Menus Of 2017

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

Demo Download

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

Responsive Dropdown Nav Menu

Demo Download

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

CSS Flexbox Based Responsive Navigation

Demo Download

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

Demo Download

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

css_nav

Demo Download

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

Responsive Priority Navigation With Pure CSS

Demo Download

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

material-style-responsive-dropdown-navigation-with-pure-css

Demo Download

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

responsive-drawer-navigation-in-pure-css

Demo Download

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

responsive-show-hide-navigation-menu-with-javascript-and-css3

Demo Download

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

Multi-level Toggle Responsive Navigation Menu using Pure CSS

Demo Download

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.