Responsive Hamburger Menu with jQuery & CSS

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	js-jq-hamburger
Author:	Walter Satriano
Licence:	MIT Licence
Published:	January 11, 2024
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

Demo Download

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");
  });
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.