Web Programming TutorialsHamburger Menu using HTML, CSS and JavaScript

Hamburger Menu using HTML, CSS and JavaScript

The hamburger menu consists of three horizontal lines (bars) piled upon one another which are generally found at the top right or left corner of the webpage. It allow users to click through and have a glimpse of a hidden menu of the different pages of the website. The hamburger menu is a technique in a responsive design aimed at improving the functionality of a website.

The hamburger menu was originally created by former Xerox product designer Norm Cox in 1981. It was intended to simply indicate a list within the company’s Star system.

What we are going to learn in this article?

When you click on the hamburger menu the window comes up with the navigation bar.

Pros and Cons of the Hamburger Menu

Pros :

  • Signifies Importance
  • Can save screen real estate
  • Easy to use
  • Allows for direct access
  • Helps reducing complexity, offering a consistent way to display navigation


  • Features still not immediately viewable.
  • Can take up a large block of screen real estate.
  • It can hide a lot of vital information.
  • There is an interaction cost as users need to click the hamburger icon every time they need to access the navigation rather than being able to just click a navigation item.

Hamburger Menu:

Hamburger Menu
HTML Code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400|Slabo+27px" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Hamburger Menu</title>

    <div class="container">
         <div class="banner">
            <div class="logo">
                <a href="#"><img src="images/logo.png"></a>
        <div class="nav-wrapper">
            <div class="hamburger-menu">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
        <nav class="top-nav">
             <ul class="nav-list">
                    <li><a href="#" class="nav-link" data-text="Home">Home</a></li>
                    <li><a href="#" class="nav-link" data-text="About Us">About Us</a></li>
                    <li><a href="#" class="nav-link" data-text="Services">Services</a></li>
                    <li><a href="#" class="nav-link" data-text="Contact">Contact</a></li>
    <script src="app.js"></script>


* {
    margin: 0;
    padding: 0;

.container {
    font-family: 'Montserrat', sans-serif;

.banner {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .8)), url(images/banner-bg.jpeg) center no-repeat;
    background-size: cover;

.logo {
    height: 80px;
    width: 80px;
    position: fixed;
    top: 20px;
    left: 50px;
    z-index: 100;

.logo img {
    width: 100%;

.hamburger-menu {
    width: 45px;
    height: 35px;
    position: fixed;
    top: 40px;
    right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 100;

.line {
    width: inherit;
    height: 5px;
    background-color: #16c3cf;
    border-radius: 25px;
    transform-origin: right;
    transition: transform .5s;

.line-2 {
    height: 3px;

.change .line-1 {
    transform: rotateZ(-45deg);

.change .line-2 {
    transform: translate(5px, 20px);

.change .line-3 {
    transform: rotateZ(45deg);

.top-nav {
    height: 15vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(images/nav-bg.jpeg) no-repeat 50% 0;
    background-size: cover;
    position: fixed;
    top: -15vh;
    z-index: 50;
    transition: top .4s;

.change .top-nav {
    top: 0;

.nav-list {
    list-style: none;
    width: 80%;
    margin: auto;
    height: inherit;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

.nav-link {
    text-decoration: none;
    font-size: 30px;
    text-transform: uppercase;
    color: #ccc;
    background-color: #000;
    letter-spacing: 1px;
    padding: 5px 10px;
    display: block;
    position: relative;

.nav-link:hover {
    transform: rotateX(90deg);

.nav-link::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    bottom: -100%;
    background-color: #000;
    padding: inherit;
    color: #16c3cf;
    transform: rotateX(-90deg);
    transform-origin: top;

.bottom-nav {
    width: 100%;
    height: 85vh;
    background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(images/nav-bg.jpeg) no-repeat 50% -15vh;
    background-size: cover;
    position: fixed;
    bottom: -85vh;
    transition: bottom .4s;

@media(max-width: 1200px) {
    .top-nav {
        background: #010101;

    .nav-list {
        justify-content: center;

    .nav-link {
        font-size: 25px;


@media(max-width: 900px) {
    .top-nav {
        height: 25vh;
        top: -25vh;

    .nav-list {
        width: 70%;
        flex-wrap: wrap;
        align-content: center;

    .nav-link {
        margin: 3px 0;

@media(max-width: 750px) {
    .nav-list {
        width: 60%;


@media(max-width: 550px) {

    .logo {
        width: 70px;
        height: 70px;
        left: 30px;

    .top-nav {
        height: 30vh;
        top: -30vh;


@media(max-width: 450px) {

    .top-nav {
        height: 35vh;
        top: -35vh;

    .nav-list {
        width: 50%;


  document.querySelector('.hamburger-menu').addEventListener('click', () => {


Output image 1
Highlighted lines within the red square show the Hanburger Menu


Output Image 2

Now, the hamburger menu is ready to use. Hope you find this article useful and for more deeper insights you can explore HTML, CSS and JavaScript Course.


Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article


More article

- Advertisement -