Minimal Mobile-first Hamburger Navigation - responsive-navbar.js

File Size: 3.72 KB
Views Total: 2878
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Mobile-first Hamburger Navigation - responsive-navbar.js

responsive-navbar.js is a responsive, mobile-first, jQuery based navigation system that smoothly slides up and down by tapping on the hamburger toggle button.

Based on CSS media queries, flexbox layout, and jQuery slide animations.

How to use it:

1. Create the HTML for the navbar.

<div class="nav">
  <h1>Your Site</h1>
  <nav class="nav-menu">
    <img src="hamburger.png" alt="nav toggle button" id="mobile-menu">
    <ul class="nav-ul">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

2. The primary CSS for the navbar.

.nav {
  background-color: #222;
  width: 100vw;
  color: white;
  display: flex;
  flex-wrap: wrap;
}

.nav h1 {
  box-sizing: border-box;
  width: auto;
  margin: auto;
  margin-left: 0;
  padding-left: 20px;
}

.nav-menu {
  margin: auto 0 auto auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#mobile-menu {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-right: 0;
  padding: 20px;
  cursor: pointer;
}

.nav-ul {
  box-sizing: border-box;
  display: none;
}

.nav-ul li {
  list-style-type: none;
  padding: 20px;
  text-align: right;
}

3. Hide the mobile menu on the desktop.

@media only screen and (min-width: 900px) {
  #mobile-menu {
    display: none;
  }
  .nav-ul {
    display: flex;
    flex-direction: row;
  }
}

4. Place the latest version of jQuery JavaScript library at the end of the document.

<script src="/path/to/jquery.min.js"></script>

5. Enable the hamburger button to toggle the mobile menu.

$('#mobile-menu').on('click', () => {
  let $navUl = $('.nav-ul');
  let $mobileMenu = $('#mobile-menu');
  $('.nav-ul').addClass().slideToggle('slow');
});

6. Remove the styles when the screen size is larger than 768px on window resize.

$(window).bind("resize", () => {
  if( $(window).width() > 768) {
    $('.nav-ul').removeAttr("style");
  }
})

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