Sticky Exanding Hamburger Menu With jQuery And CSS3

Sticky Exanding Hamburger Menu With jQuery And CSS3

A jQuery based responsive navigation system that collapse the regular horizontal menu into an expanding hamburger menu on small screen (mobile) devices.

1. The hamburger toggle button requires the latest Font Awesome iconic font.

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" 
      integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" 
      crossorigin="anonymous">

2. Create a standard site navigation from an unordered list.

<nav>
  <div class="menu-bars">
    <i class="fas fa-bars fa-2x"></i>  
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Script</a></li>
    <li><a href="#">Net</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

3. The primary CSS styles for the navigation when running on the desktop.

nav ul{
  width: 100%;
  background-color: #ac5463;
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: center;
  margin: 0;
  transition: all 1s ease-in-out;
}
nav ul li{
  display: inline-block;
  padding: 20px;
}
nav ul li a{
  text-decoration: none;
  color: inherit;
}
nav ul li:hover {
  background-color: #ac5480;
}
.menu-bars{
  width: 100%;
  background-color: #005c48;
  text-align: right;
  box-shadow: border-box;
  padding: 20px 0px;
  cursor: pointer;
  color: #fff;
  display: none;
}
.menu-bars .fas{
  margin-right: 20px;
}

4. The CSS rules for the expanding hamburger menu when running on the mobile. Override the max-width value to specify the breakpoint you prefer.

@media screen and (max-width: 812px){
  nav ul{
    max-height: 0px;
    position: fixed;
    top: 4.5em;
  }
  nav ul li{
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
  }
  .menu-bars{
    display: block;
    position: fixed;
    top: 0;
  }
  .showing{
    max-height: 20em;
    position: fixed;
    top: 4.5em;
  }
  
}

5. Load the latest version of jQuery JavaScript library at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

6. Show/hide the expanding hamburger menu by toggling the CSS classes with jQuery.

$(document).ready(function(){
  $(".menu-bars").on("click", function(){
    $("nav ul").toggleClass("showing");
  });
  $("nav ul li").on("click", function(){
    $("nav ul").removeClass("showing");
  });
});

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

  • Publication date: 22.04.2018
  • Source