This time I will share jQuery Plugin and tutorial about Cross-platform Responsive Navigation With jQuery – menuBreaker, hope it will help you in programming stack.
File Size: | 100 KB |
---|---|
Views Total: | 13282 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
menuBreaker is a responsive, cross-platform, multi-level navigation plugin for jQuery that auto collapses the regular horizontal nav into an off-canvas toggle menu on mobile devices.
How to use it:
1. Create the desktop and mobile nav menus from nested HTML unordered lists. And then insert them together with the mobile menu toggle button into a nav
element like these:
01 |
< nav id = "navbar" > |
02 |
< div class = "menu" > |
03 |
< ul class = "desktop" > |
04 |
< li >< a href = "#" >< a href = "https://www.jqueryscript.net/menu/" >Menu</ a > item 1</ a > |
05 |
< ul class = "submenu" > |
06 |
< li >< a href = "#" >Menu 1-1</ a ></ li > |
07 |
< li >< a href = "#" >Menu 1-2</ a ></ li > |
08 |
</ ul > |
09 |
</ li > |
10 |
< li >< a href = "#" >Menu item 2</ a ></ li > |
11 |
< li >< a href = "#" >Menu item 3</ a ></ li > |
12 |
... |
13 |
</ ul > |
14 |
< ul class = "mobile" > |
15 |
< li >< a href = "#" >Menu item 1</ a > |
16 |
< ul class = "submenu" > |
17 |
< li >< a href = "#" >Menu 1-1</ a ></ li > |
18 |
< li >< a href = "#" >Menu 1-2</ a ></ li > |
19 |
</ ul > |
20 |
</ li > |
21 |
< li >< a href = "#" >Menu item 2</ a ></ li > |
22 |
< li >< a href = "#" >Menu item 3</ a ></ li > |
23 |
... |
24 |
</ ul > |
25 |
</ div > |
26 |
< div id = "openMenu" >MENU</ div > |
27 |
</ nav > |
2. Create an overlay element that will be used to overlay the main container when the mobile menu is opened.
1 |
< div class = "overlay" ></ div > |
3. The primary CSS styles for the desktop menu.
001 |
#navbar { |
002 |
z-index : 100 ; |
003 |
position : relative ; |
004 |
height : 70px ; |
005 |
background-color : #4286f4 ; |
006 |
} |
007 |
008 |
.menu { |
009 |
border : 0 ; |
010 |
max-height : 70px ; |
011 |
float : left ; |
012 |
width : 100% ; |
013 |
text-align : center ; |
014 |
} |
015 |
016 |
.desktop { |
017 |
font-size : 0 ; |
018 |
min-height : 70px ; |
019 |
background : none ; |
020 |
padding-left : 10px ; |
021 |
padding-right : 10px ; |
022 |
float : none ; |
023 |
} |
024 |
025 |
.desktop li { |
026 |
border : 0 ; |
027 |
margin-left : 1px ; |
028 |
margin-right : 1px ; |
029 |
height : 70px ; |
030 |
display : inline- block ; |
031 |
float : none ; |
032 |
list-style : none ; |
033 |
padding : 0 ; |
034 |
position : relative ; |
035 |
} |
036 |
037 |
.desktop li a { |
038 |
transition: all 300 ms ease; |
039 |
color : #ffffff ; |
040 |
font-weight : 700 ; |
041 |
text-decoration : none ; |
042 |
font-size : 15px ; |
043 |
margin : 0 auto ; |
044 |
text-transform : uppercase ; |
045 |
display : inline- block ; |
046 |
height : 70px ; |
047 |
padding : 27px 13px ; |
048 |
} |
049 |
050 |
.desktop li a:hover { background-color : #00c0ff ; } |
051 |
052 |
.desktop .submenu { |
053 |
position : absolute ; |
054 |
display : block ; |
055 |
margin-top : 0 ; |
056 |
padding : 0 ; |