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 300ms 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; |
