This time I will share jQuery Plugin and tutorial about Sticky Mobile-compatible Navigation – GRT Responsive Menu, hope it will help you in programming stack.
The GRT Responsive Menu jQuery plugin lets you create a fully responsive, mobile-friendly navigation system for your cross-platform web app.
The plugin automatically transforms the navigation into a hamburger menu that reveals a fullscreen menu when toggled.
Also supports multi-level menus based on nested HTML lists.
How to use it:
1. Include jQuery library, grt-responsive-menu.css and grt-responsive-menu.js on the webpage.
1 |
<link rel="stylesheet" href="grt-responsive-menu.css"> |
3 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin="anonymous"> |
6 |
<script src="grt-responsive-menu.js"></script> |
2. Create the HTML for the GRT Responsive Menu. That’s it.
02 |
<button class="grt-mobile-button"> |
03 |
<div class="line1"></div> |
04 |
<div class="line2"></div> |
05 |
<div class="line3"></div> |
08 |
<li class="active"><a href="">Home</a></li> |
09 |
<li><a href="">About</a></li> |
10 |
<li><a href="">Contact</a></li> |
11 |
<li><a href="">Blog</a></li> |
12 |
<li class="grt-dropdown"><a>JavaScript</a> |
13 |
<ul class="grt-dropdown-list"> |
14 |
<li><a href="">AngularJS</a></li> |
15 |
<li><a href="">VueJS</a></li> |
16 |
<li><a href="">ReactJS</a></li> |
19 |
<li><a href="">More Links</a></li> |
Changelog:
2020-04-29
- Fixed on window resize click
2019-04-03
2018-11-09
This awesome jQuery plugin is developed by grt107. For more Advanced Usages, please check the demo page or visit the official website.
