Responsive Hamburger Menu with jQuery & CSS

A lightweight jQuery plugin that create responsive hamburger menu. The menu comes with two versions (for both desktop and mobile) view. On desktop view, the menu is horizontal menubar with logo and navigation links. On mobile view, the menu shows hamburger toggle menu.

The plugin uses Font Awesome CSS library for hamburger icon. The icon toggle the menu, user can easily navigate through menu.

Plugin Overview

Plugin: js-jq-hamburger
Author: Walter Satriano
Licence: MIT Licence
Published: August 2, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Font Awesome 5
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 17.3 KB

How to Use jQuery Responsive Hamburger Menu

1. First of all load jQuery JavaScript library and Font Awesome 5 into your HTML document to getting started with hamburger menu.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Fontawesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

2. Now include hamburger menu’s JavaScript and CSS file.

<!-- Hamburger Menu CSS -->
<link rel="stylesheet" href="css/style.css"> 

<!-- Hamburger Menu JS -->
<script src="js/main.js" charset="utf-8"></script>

3. Create header element and put both desktop & mobile version of your navigation links. The horizontal menu will show on large screen (desktop) and hamburger menu will display on mobile devices.

<header>
   <div class="header-left">
      <img src="img/logo.png" alt="">
   </div>
   <div class="header-right">
      <ul>
         <li>
            <a href="#">Home</a>
         </li>
         <li>
            <a href="#">Scopri il Corso</a>
         </li>
         <li>
            <a href="#">La nostra storia</a>
         </li>
         <li>
            <a href="#" class="cta">Iscriviti</a>
         </li>
      </ul>
      <a href="#">
      <i class="fas fa-bars"></i>
      </a>
   </div>
   <div class="hamburger-menu">
      <ul>
         <li>
            <a href="#">Home</a>
         </li>
         <li>
            <a href="#">Scopri il Corso</a>
         </li>
         <li>
            <a href="#">La nostra storia</a>
         </li>
         <li>
            <a href="#" class="cta">Iscriviti</a>
         </li>
      </ul>
      <a href="#" class="close">
      <i class="fas fa-times"></i>
      </a>
   </div>
</header>

4. To use inline CSS or customize styles.

header {
    padding: 0 20px;
    width: 100%;
    height: 70px;
    background: white;
    border-bottom: 1px solid #efefef;
}
.header-left, .header-right {
    float: left;
    height: 100%;
}
.header-left {
    width: 20%;
}
.header-right {
    width: 80%;
}
.header-left img {
    height: 40px;
    margin-top: 15px;
}
.header-right > a {
    display: none;
}
.header-right ul {
    list-style: none;
    height: 100%;
    text-align: right;
}
.header-right ul li {
    display: inline-block;
    margin: 0 20px;
    line-height: 70px;
    height: 100%;
}
.header-right ul li a {
    color: #565A5C;
    text-decoration: none;
}
.header-right ul li a.cta {
    padding: 10px 20px;
    color: white;
    background: #E78D5C;
}

.hamburger-menu {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    padding: 20px;
    width: 100%;
    height: 100%;
    min-width: 100vw;
    min-height: 100vh;
    background: #2B3F58;
}
.hamburger-menu ul {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    list-style: none;
}
.hamburger-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 25px;
    border-bottom: 2px solid white;
}
.close {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    color: white;
    font-size: 35px;
    text-decoration: none;
}
@media screen and (max-width: 1000px)
{
    .header-right ul {
        display: none;
    }
    .header-right > a {
        display: block;
        height: 100%;
        line-height: 70px;
        float: right;
        color: lightgrey;
        font-size: 20px;
    }

    .hamburger-menu.active {
        display: block;
    }
}

5. If you want to use inline script, then you can use the following jQuery function.

$(document).ready(function(){
  $(".header-right > a").click(function() {
    $(".hamburger-menu").addClass("active");
  });
  $(".close").click(function() {
    $(".hamburger-menu").removeClass("active");
  });
});