This time I will share jQuery Plugin and tutorial about Mobile-first Mega Menu Plugin With jQuery – hs Mega Menu, hope it will help you in programming stack.
The hs Mega Menu jQuery plugin lets you create a responsive, sticky, mobile-first, SEO-friendly mega menu for the content-heavy web app.
Features:
Basic usage:
1. Include the needed jQuery library and Material Design Iconic Font on the page.
5 |
integrity = "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" |
6 |
crossorigin = "anonymous" > |
2. Include the jQuery hs Mega Menu’s files on the page.
2 |
< script src = "js/jquery.hsmenu.min.js" ></ script > |
4 |
< link rel = "stylesheet" href = "css/hs-menu.min.css" > |
3. Build the HTML for the mega menu.
01 |
< header class = "hs-menubar" > |
02 |
< div class = "brand-logo" > |
04 |
< img src = "logo.png" title = "Your logo will be here" alt = "hs Mega Menu" > |
07 |
< div class = "menu-trigger" > < i class = "zmdi zmdi-menu" ></ i ></ div > |
08 |
< div class = "search-trigger" > < i class = "zmdi zmdi-search" ></ i ></ div > |
09 |
< div class = "search-box" > |
11 |
< input type = "text" name = "search" > |
12 |
< button type = "submit" class = "search-submit" disabled>Search</ button > |
15 |
< div class = "hs-user toggle" data-reveal = ".user-info" > |
16 |
< img src = "avatar.jpg" alt = "Asif Mughal" > |
19 |
< div class = "more-trigger toggle" data-reveal = ".user-penal" > < i class = "zmdi zmdi-more-vert" ></ i ></ div > |
21 |
< section class = "box-models" > |
22 |
< ul class = "user-penal" > |
23 |
< li > < a href = "#1" >< i class = "zmdi zmdi-inbox" ></ i > Inbox </ a > </ li > |
24 |
< li > < a href = "#1" > < i class = "zmdi zmdi-delete" ></ i > Trash </ a > </ li > |
25 |
< li > < a href = "#1" > < i class = "zmdi zmdi-run" ></ i > Logout </ a > </ li > |
27 |
< ul class = "user-info" > |
28 |
< li class = "profile-pic" > </ li > |
29 |
< li class = "user-name" >Asif Mughal </ li > |
30 |
< li class = "user-bio" > Front End Web Developer</ li > |
31 |
< li class = "more-btn" > < a href = "#1" > Find Out More</ a > </ li > |
33 |
< ul class = "grid-items" > |
34 |
< li class = "grid" > Item one</ li > |
35 |
< li class = "grid" > Item two </ li > |
36 |
< li class = "grid" > Item three </ li > |
37 |
< li class = "more-btn" >< a href = "#1" > More</ a ></ li > |
40 |
< nav class = "hs-navigation" > |
41 |
< ul class = "nav-links" > |
42 |
< li >< a href = "#4" > < span class = "icon" > < i class = "zmdi zmdi-collection-item" ></ i > </ span > List Item one</ a > </ li > |
43 |
< li class = "has-child" > |
44 |
< span class = "its-parent" > |
45 |
< span class = "icon" > < i class = "zmdi zmdi-device-hub" ></ i > |
46 |
</ span >Multilevel Dropdown</ span > |
47 |
&nbs
source : jquery.net
|