Simple responsive sidebar menu.
npm install --save css-ui-responsive-menu
CSS dependencies.
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/perfect-scrollbar.css">
<link rel="stylesheet" href="path/to/font-awesome.css">
<link rel="stylesheet" href="path/to/open-sans.css">
<link rel="stylesheet" href="path/to/cssui.css">CSS menu.
<link rel="stylesheet" href="path/to/style.menu.css">CSS light or dark theme. Choose one.
<link rel="stylesheet" href="path/to/style.menu.light.css">
<link rel="stylesheet" href="path/to/style.menu.dark.css">Use Open Sans fotns.
font-family: 'Open Sans', sans-serif;Simple menu html.
<!-- nav wrapper -->
<div class="nav">
<!-- click show/hide menu -->
<div class="click"></div>
<div class="sidebar">
<!-- title for sidebar -->
<div class="title">
<p>Title for sidebar</p>
</div>
<div class="responsive">
<ul class="menu scrollbar">
<!-- simple menu -->
<li>
<span class="name">Simple menu</span>
<ul>
<li><a href="#">One</a></li>
<li><a href="#" class="current">Two</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- content wrapper -->
<div class="content-wrapper">
<h1>Content</h1>
</div>Dropdown menu html.
<!-- nav wrapper -->
<div class="nav">
<!-- click show/hide menu -->
<div class="click"></div>
<div class="sidebar">
<!-- title for sidebar -->
<div class="title">
<p>Title for sidebar</p>
</div>
<div class="responsive">
<ul class="menu scrollbar">
<!-- dropdown menu -->
<li>
<span class="name">Dropdown menu</span>
<ul>
<li><a href="#">Click</a></li>
<li class="parent">
<a href="#" class="employ current">Europe</a>
<ul class="submenu">
<li><a href="#">Germany</a></li>
<li><a href="#" class="current">France</a></li>
<li><a href="#">Italy</a></li>
<!-- multilevel -->
<li class="parent">
<a href="#" class="employ">Click</a>
<ul class="submenu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- content wrapper -->
<div class="content-wrapper">
<h1>Content</h1>
</div>Notice info.
<li><a href="#">Notice<span class="notice">3</span></a></li>javascript libraries and plugins.
<script src="path/to/jquery.js"></script>
<script src="path/to/perfect-scrollbar.js"></script>
<script src="path/to/responsive.menu.js"></script>
<script>
$(function() {
var ps = new PerfectScrollbar('.scrollbar');
});
</script>Enjoy responsive menu.