This time I will share jQuery Plugin and tutorial about Smart Sticky Header Hamburger Navigation Plugin – jQuery mhead, hope it will help you in programming stack.
mhead is a jQuery plugin used to create a sticky header hamburger navigation for your web application that auto shows/hides as you scroll/swipe the page down or up.
Liccensed under the CC-BY-4.0 license.
How to use it:
1. The plugin depends on jQuery library and jQuery mmenu plugin.
1 |
< script src = "/path/to/jquery.js" ></ script > |
2 |
< link rel = "stylesheet" href = "/path/to/jquery.mmenu.all.css" > |
3 |
< script src = "/path/to/jquery.mmenu.all.js" ></ script > |
2. Load the mhead plugin’s JS and CSS files in the document.
1 |
< link rel = "stylesheet" href = "jquery.mhead.css" > |
2 |
< script src = "jquery.mhead.js" ></ script > |
3. Load the latest Font Awesome for the navigation icons.
1 |
< link rel = "stylesheet" href = "/path/to/font-awesome.min.css" > |
4. Create the header navigation bar with the following CSS classes:
- .mh-head: required
- .mh-size-2/3: enlarges the header nav two or three times
- .mh-align-left/right: aligns the text or logo to the left or right.
- .mh-btns-left/right: aligns the toggle button to the left or right.
- .mh-btns-2/3-left/right: enlarges the toggle button two or three times
- .mh-hamburger: transforms the toggle button into a hamburger button
- .mh-text: header text
- .mh-list: scrollable list
- .mh-form: search field
- .mh-logo: site logo
- .mh-image: background image
1 |
< div class = "mh-head Sticky" id = "example" > |
2 |
< span class = "mh-btns-left" > |
3 |
< a class = "fa fa-bars" href = "#menu" ></ a > |
5 |
< span class = "mh-text" >demo</ span > |
5. Inert your own menu items to the navigation.
03 |
< li >< a href = "#" >Home</ a ></ li > |
04 |
< li >< span >About us</ span > |
06 |
< li >< a href = "#" >History</ a ></ li > |
07 |
< li >< span >The team</ span > |
09 |
< li >< a href = "#" >Management</ a ></ li > |
10 |
< li >< a href = "#" >Sales</ a ></ li > |
11 |
< li >< a href = "#" >Development</ a ></ li > |
14 |
< li >< a href = "#" >Our address</ a ></ li > |
17 |
< li >< a href = "#" >Contact</ a ></ li > |
6. Initialize the plugin with default settings and we’re done.
7. All default settings to customize the header navigation.
Changelog:
2020-08-18
2018-06-13
This awesome jQuery plugin is developed by FrDH. For more Advanced Usages, please check the demo page or visit the official website.