Sticky Mobile-compatible Navigation - GRT Responsive Menu

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.

<link rel="stylesheet" href="grt-responsive-menu.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="grt-responsive-menu.js"></script>

2. Create the HTML for the GRT Responsive Menu. That's it.

<nav>
  <button class="grt-mobile-button">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </button>
  <ul class="grt-menu">
    <li class="active"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Blog</a></li>
    <li class="grt-dropdown"><a>JavaScript</a>
      <ul class="grt-dropdown-list">
        <li><a href="">AngularJS</a></li>
        <li><a href="">VueJS</a></li>
        <li><a href="">ReactJS</a></li>
      </ul>
    </li>
    <li><a href="">More Links</a></li>
  </ul>
</nav>

Changelog:

2020-04-29

• Fixed on window resize click

2019-04-03

• Removed Bootstrap dependency.

2018-11-09

• CSS Update

---

This awesome jQuery plugin is developed by grt107. For more Advanced Usages, please check the demo page or visit the official website.