Main Features
- Responsive (Mobile First), Modern and Attractive Design.
- Multilevel Dropdowns based on Nested List of anchor links.
- Unlimited main items and sub items can be added to a dropdown.
- Animated CSS3 box models for show up Profile info, Grid Items and user penal links.
- CSS3 and jQuery Sliding, Fading & Ripple Animations Enabled.
- Material Design Iconic Fonts.
- Background Fading Layer.
- Built in Search Form, Menubar, Dropdowns and Navigation Drawer.
- Chrome, Safari, Firefox, Opera, (IE almost), IOS, Android and windows phone supported.
- User Friendly and Easy to Implement.
How to Use
Help for beginners
1. Load the jQuery JavaScript library, Material Design Iconic Fonts, hs Menu JS and CSS file into HTML document.
<!--jQuery--> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!--Material Design Iconic Font--> <link rel="stylesheet" href="material-design/css/material-design-iconic-font.css" /> <!--hs Menu JS--> <script src="js/jquery.hsmenu.min.js"></script> <!-- hs Menu CSS--> <link rel="stylesheet" href="css/hs-menu.min.css" />
2. Now copy the following HTML Menu structure and add your links and other necessary things into it.
<!--Start hs Mega Menu-->
<header class="hs-menubar">
<div class="brand-logo">
<a href="#home_link"><img src="image/hs-menu.png" title="Your logo will be here" alt="hs Mega Menu"> </a>
</div>
<div class="menu-trigger"> <i class="zmdi zmdi-menu"></i></div>
<div class="search-trigger"> <i class="zmdi zmdi-search"></i></div>
<div class="search-box">
<form action="#">
<input type="text" name="search">
<button type="submit" class="search-submit" disabled>Search</button>
</form>
</div>
<div class="hs-user toggle" data-reveal=".user-info">
<img src="image/asif-mughal.jpg" alt="Asif Mughal">
</div>
<div class="grid-trigger toggle" data-reveal=".grid-items"> <i class="zmdi zmdi-view-module"></i> </div>
<div class="more-trigger toggle" data-reveal=".user-penal"> <i class="zmdi zmdi-more-vert"></i></div>
</header>
<section class="box-models">
<ul class="user-penal">
<li> <a href="#1"><i class="zmdi zmdi-inbox"></i> Inbox </a> </li>
<li> <a href="#1"> <i class="zmdi zmdi-delete"></i> Trash </a> </li>
<li> <a href="#1"> <i class="zmdi zmdi-star"></i> Started </a> </li>
<li> <a href="#1"> <i class="zmdi zmdi-run"></i> Logout </a> </li>
</ul>
<ul class="user-info">
<li class="profile-pic"> </li>
<li class="user-name">Asif Mughal </li>
<li class="user-bio"> Front End Web Developer</li>
<li class="more-btn"> <a href="#1"> Find Out More</a> </li>
</ul>
<ul class="grid-items">
<li class="grid"> Item one</li>
<li class="grid"> Item two </li>
<li class="grid"> Item three </li>
<li class="grid"> Item four </li>
<li class="grid"> Item five </li>
<li class="grid"> Item six </li>
<li class="more-btn"><a href="#1"> More</a></li>
</ul>
</section>
<nav class="hs-navigation">
<ul class="nav-links">
<li><a href="#4"> <span class="icon"> <i class="zmdi zmdi-collection-item"></i> </span> List Item one</a> </li>
<li class="has-child">
<span class="its-parent">
<span class="icon"> <i class="zmdi zmdi-device-hub"></i>
</span>Multilevel Dropdown</span>
<ul class="its-children">
<li><a href="#1"> Sub Item 1.1 </a> </li>
<li class="has-child">
<span class="its-parent"> Item 1.2 has child</span>
<ul class="its-children">
<li> <a href="#1">Child Item 1.2.1 </a> </li>
<li> <a href="#1"> Child Item 1.2.2 </a> </li>
<li> <a href="#1"> Child Item 1.2.3 </a> </li>
</ul>
</li>
<li> <a href="#1"> Sub Item 1.3 </a> </li>
<li> <a href="#1"> Sub Item 1.4 </a></li>
</ul>
</li>
<li> <a href="#4"> <span class="icon"> <i class="zmdi zmdi-compass"></i> </span> List three</a> </li>
<li> <a href="#4"> <span class="icon"> <i class="zmdi zmdi-collection-video"></i> </span> List Item four</a> </li>
<li class="has-child">
<span class="its-parent">
<span class="icon"> <i class="zmdi zmdi-wrap-text"></i>
</span>Another Dropdown</span>
<ul class="its-children">
<li><a href="#1"> dropdown item 1 </a> </li>
<li> <a href="#1"> dropdown item 2 </a> </li>
<li> <a href="#1"> dropdown item 3 </a> </li>
<li> <a href="#1"> dropdown item 4</a> </li>
</ul>
</li>
<!--//has-child-->
</ul>
</nav>
<!--End hs Mega Menu-->
Initialize hsMenu() with hs-menubar selector in jQuery document ready function.
$(document).ready(function () {
$(".hs-menubar").hsMenu();
});
Working with Dropdowns
You can add multilevel dropdowns as many as you need with the same method and class name scheme.
To create first level dropdown (in main list of items) create a li element with has-child class name. After this, create a span element with class name its-parent that contains child items. Now, create another unordered list within li ( ul ) with class name its-children .
An example below:
<li class="has-child">
<span class="its-parent"> Dropdown</span>
<ul class="its-children">
<li><a href="#1"> dropdown item 1 </a> </li>
<li> <a href="#1"> dropdown item 2 </a> </li>
</ul>
</li>
You can nested dropdowns by the above mentioned method and class names. Such as:
<li class="has-child">
<span class="its-parent">
Multilevel Dropdown</span>
<ul class="its-children">
<li><a href="#1"> Sub Item 1.1 </a> </li>
<li class="has-child">
<span class="its-parent"> Item 1.2 has child</span>
<ul class="its-children">
<li> <a href="#1">Child Item 1.2.1 </a> </li>
<li> <a href="#1"> Child Item 1.2.2 </a> </li>
<li> <a href="#1"> Child Item 1.2.3 </a> </li>
</ul>
</li>
<li> <a href="#1"> Sub Item 1.3 </a> </li>
<li> <a href="#1"> Sub Item 1.4 </a></li>
</ul>
</li>
hs Mega Menu Options
There are four options available to customize this navigation system. These are:
bgFading: true, //(false to disable) background dim overlay when side navigation drawer open outClickToClose: true, // (false to disable) close opened items if user click outside of them navControls: true, // (false to disable) provide buttons to allow visitors to increase some width and height of drawer fixedMenubar: true, //false to static