This time I will share jQuery Plugin and tutorial about Convenient Retractable Navigation With jQuery And CSS3 – gnmenu.js, hope it will help you in programming stack.
| File Size: | 12.6 KB |
|---|---|
| Views Total: | 5965 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
gnmenu.js is a jQuery plugin used to create a convenient slide-out sidebar navigation for both desktop and mobile webpages. Inspired by the Google Nexus website.
How it works:
- Make the menu ‘half show’ when you hover over the toggle button.
- If the menu is half show, show the whole menu when you click on the toggle button.
- Hide the menu by clicking/tapping on web page body.
How to use it:
1. Add the jQuery gnmenu.js script after the latest version of jQuery JavaScript library as follows:
1 |
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> |
2 |
<script src="js/gnmenu.js"></script> |
2. The html for the sidebar navigation.
1 |
<div id="sideNav"> |
2 |
<ul> |
3 |
<li><a href="#" class="icon icon-home"><span>Home</span></a></li> |
4 |
<li><a href="#" class="icon icon-articles"><span>Articles</span></a></li> |
5 |
<li><a href="#" class="icon icon-social"><span>Social Media</span></a></li> |
6 |
</ul> |
7 |
</div> |
3. Create a toggle button for the sidebar navigation.
1 |
<nav> |
2 |
<ul> |
3 |
<li><a href="#" class="icon icon-menu" id="btn-menu"><a href="https://www.jqueryscript.net/menu/">Menu</a></a></li> |
4 |
</ul> |
5 |
</nav> |
4. The core CSS/CSS3 styles for the sidebar navigation.
001 |
nav { |
002 |
font-family: 'Roboto', sans-serif; |
003 |
width: 100%; |
004 |
height: 59px; |
005 |
border-bottom: 1px solid #ddd; |
006 |
position: fixed; |
007 |
top: 0; |
008 |
left: 0; |
009 |
z-index: 20; |
010 |
background-color: #ffffff; |
011 |
} |
012 |
013 |
nav ul, #sideNav ul, #sideNav ul ul { |
014 |
margin: 0; |
015 |
padding: 0; |
016 |
list-style: none; |
017 |
} |
018 |
019 |
nav li { |
020 |
margin: 0; |
021 |
float: left; |
022 |
border-right: 1px solid #ddd; |
023 |
font-size: 18px; |
024 |
} |
025 |
026 |
nav a, #sideNav a { |
027 |
color: #5b6064; |
028 |
text-decoration: none; |
029 |
display: block; |
030 |
padding: 10px 30px; |
031 |
height: 59px; |
032 |
-webkit-box-sizing: border-box; |
033 |
-moz-box-sizing: border-box; |
034 |
-o-box-sizing: border-box; |
035 |
line-height: 35px; |
036 |
} |
037 |
038 |
nav a:hover, #sideNav a:hover { |
039 |
color: #ffffff; |
040 |
background-color: #5b6064; |
041 |
} |
042 |
043 |
#sideNav, #sideNav.showHalfMenu, #sideNav.showFullMenu, #sideNav ul ul li, #sideNav.showFullMenu ul ul li { |
044 |
-webkit-transition: 0.2s ease; |
045 |
-moz-transition: 0.2s ease; |
046 |
-ms-transition: 0.2s ease; |
047 |
transition: 0.2s ease; |
048 |
} |
049 |
050 |
#sideNav { |
051 |
position: fixed; |
052 |
left: -60px; |
053 |
top: 59px; |
054 |
width: 60px; |
055 |
height: 100%; |
056 |
/* border-right:1px solid #ddd; */ |
057 |
background-color: #ffffff; |
058 |
overflow-y: auto; |
059 |
} |
060 |
061 |
#sideNav.showHalfMenu { left: 0; } |
062 |
063 |
#sideNav.showFullMenu { |
064 |
left: 0; |
065 |
width: 311px; |
066 |
} |
067 |
068 |
#sideNav.showFullMenu ul ul li { height: 59px; } |
069 |
070 |
#sideNav > ul { |
071 |
width: 100%; |
072 |
padding-bottom: 60px; |
073 |
} |
074 |
075 |
#sideNav ul li { |
076 |
width: 100%; |
077 |
margin: 0; |
078 |
font-weight: 300; |
079 |
} |
080 |
081 |
#sideNav ul li a { |
