mhead.js is a small framework for creating a beautiful mobile navigation header to accompany the mmenu.js navigation menu on your website and web application. mhead is a jQuery plugin that is used to create a pinned header hamburger navigation for your web app that automatically shows/hides as you scroll down/up the page.
jquery sidebar menu with submenu, slide menu jquery plugin, mmenu alternative, jquery mobile hamburger menu, fixed menu on scroll jquery
How to make use of it:
1. The plugin is determined by the jQuery library and jQuery mmenu plugin.
<script src="/path/to/jquery.js"></script> <link rel="stylesheet" href="/path/to/jquery.mmenu.all.css"> <script src="/path/to/jquery.mmenu.all.js"></script>
2. Load the mhead plugin’s JS and CSS information within the doc.
<link rel="stylesheet" href="jquery.mhead.css"> <script src="jquery.mhead.js"></script>
3. Load the most recent Font Awesome for the navigation icons.
<link rel="stylesheet" href="/path/to/font-awesome.min.css">
4. Create the header navigation bar with the next CSS.
<div class="mh-head Sticky" id="example"> <span class="mh-btns-left"> <a class="fa fa-bars" href="#menu"></a> </span> <span class="mh-text">demo</span> </div>
5. Inert your individual menu objects to the navigation.
<nav id="menu"> <ul> <li><a href="#">Home</a></li> <li><span>About us</span> <ul> <li><a href="#">History</a></li> <li><span>The team</span> <ul> <li><a href="#">Management</a></li> <li><a href="#">Sales</a></li> <li><a href="#">Development</a></li> </ul> </li> <li><a href="#">Our address</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav>
6. Initialize the plugin with default settings and we’re achieved.
// create a menu $('#menu').mmenu(); // fire the plugin $('.mh-head').mhead();
7. All default settings to customize the header navigation.
$('.mh-head').mhead({ scroll: { // amount of pixels to scroll down before hiding the header nav hide: 0, // amount of pixels to scroll down before showing the header nav show: 0, // minimum amount of pixels to scroll per scroll-event before showing or hiding the header nav tolerance: 4 }, hamburger: { // query selector for the menu that should be opened when clicking the hamburger icon // if omitted, the plugin will use the anchor href attribute or target the first mmenu menu that it finds menu: null, // animation type animation: "collapse" } });
Smart Sticky Header Hamburger Navigation Plugin, mhead.js Github, jquery mobile side menu, multi level mobile menu jquery
See Demo And Download
Official Website(FrDH): Click Here
This superior jQuery/javascript plugin is developed by FrDH. For extra Advanced Usages, please go to the official website.
Be First to Comment