CSS UI - Responsive menu

Simple responsive sidebar menu.

Installation

npm install --save css-ui-responsive-menu

Demo

• https://css-ui.github.io/responsive.menu/light
• https://css-ui.github.io/responsive.menu/dark

Quick start

CSS dependencies.

<linkrel="stylesheet" href="path/to/normalize.css"><linkrel="stylesheet" href="path/to/perfect-scrollbar.css"><linkrel="stylesheet" href="path/to/font-awesome.css"><linkrel="stylesheet" href="path/to/open-sans.css"><linkrel="stylesheet" href="path/to/cssui.css">

CSS menu.

<linkrel="stylesheet" href="path/to/style.menu.css">

CSS light or dark theme. Choose one.

<linkrel="stylesheet" href="path/to/style.menu.light.css"><linkrel="stylesheet" href="path/to/style.menu.dark.css">

Use Open Sans fotns.

font-family:'Open Sans', sans-serif;

Simple menu html.

<!-- nav wrapper --><divclass="nav"><!-- click show/hide menu --><divclass="click"></div><divclass="sidebar"><!-- title for sidebar --><divclass="title"><p>Title for sidebar</p></div><divclass="responsive"><ulclass="menu scrollbar"><!-- simple menu --><li><spanclass="name">Simple menu</span><ul><li><ahref="#">One</a></li><li><ahref="#" class="current">Two</a></li></ul></li></ul></div></div></div><!-- content wrapper --><divclass="content-wrapper"><h1>Content</h1></div>

Dropdown menu html.

<!-- nav wrapper --><divclass="nav"><!-- click show/hide menu --><divclass="click"></div><divclass="sidebar"><!-- title for sidebar --><divclass="title"><p>Title for sidebar</p></div><divclass="responsive"><ulclass="menu scrollbar"><!-- dropdown menu --><li><spanclass="name">Dropdown menu</span><ul><li><ahref="#">Click</a></li><liclass="parent"><ahref="#" class="employ current">Europe</a><ulclass="submenu"><li><ahref="#">Germany</a></li><li><ahref="#" class="current">France</a></li><li><ahref="#">Italy</a></li><!-- multilevel --><liclass="parent"><ahref="#" class="employ">Click</a><ulclass="submenu"><li><ahref="#">One</a></li><li><ahref="#">Two</a></li></ul></li></ul></li></ul></li></ul></div></div></div><!-- content wrapper --><divclass="content-wrapper"><h1>Content</h1></div>

Notice info.

<li><ahref="#">Notice<spanclass="notice">3</span></a></li>

javascript libraries and plugins.

<scriptsrc="path/to/jquery.js"></script><scriptsrc="path/to/perfect-scrollbar.js"></script><scriptsrc="path/to/responsive.menu.js"></script><script>$(function(){varps=newPerfectScrollbar('.scrollbar');});</script>

Enjoy responsive menu.