Skip to content
Related Articles

Related Articles

Improve Article

How to create Hamburger Menu for mobile devices ?

  • Last Updated : 20 Nov, 2020

The hamburger button is the button that placed on the top corner of the web page user interface. The hamburger button toggles the navigation menu bar on the screen. The icon which is associated with this widget, consisting of three horizontal bars, is also known as the collapsed menu icon.

We will create:

  • Hamburger Menu using html, CSS and JavaScript for mobile devices
  • Hamburger Menu using Bootstrap

Hamburger Menu using html, CSS and JavaScript for mobile devices: We will write all HTML and CSS of our own and add some JavaScript to handle click event. The basic approach is to mark the visibility of navigation bar to hidden. When a user clicks the icon, then JavaScript will remove the visibility from hidden. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href=
    -awesome/4.7.0/css/font-awesome.min.css">
      
    <title>GFG Hamburger Menu Tutorial</title>
  
    <style>
        .container {
            max-width: 480px;
            height: 500px;
            background: #5555;
            margin: auto;
            border: 2px solid green;
        }
  
        .navbar {
            background: white;
            position: relative;
        }
  
        .links {
            display: none;
        }
  
        .heading a:nth-child(2) {
            color: green;
            text-decoration: none;
            font-size: 20px;
            display: block;
            padding: 7px;
            margin-left: 150px;
        }
  
        .heading a i {
            color: green;
            padding: 10px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }
  
        .heading a i:hover {
            background-color: rgb(0, 0, 0);
            color: rgb(255, 255, 255);
        }
  
        .links {
            background-color: rgb(190, 196, 190);
        }
  
        .links a {
            color: green;
            padding: 5px 16px;
            text-decoration: none;
            font-size: 17px;
            display: block;
            text-align: center;
            border-bottom: 1px solid white;
        }
  
        .links a:hover {
            background-color: green;
            color: white;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="navbar">
            <div class="heading">
                <a href="#hamburger-icon" onclick="gfgMenu()">
                    <i class="fa fa-bars"></i>
                </a>
                <a href="#Home"> Geeks For Geeks </a>
            </div>
            <div class="links">
                <a href="#gfg1"> Notes </a>
                <a href="#gfg2"> Algorithm </a>
                <a href="#gfg3"> Maths </a>
                <a href="#gfg4"> Data Structure </a>
                <a href="#gfg5"> Java </a>
            </div>
        </div>
    </div>
  
    <script>
        function gfgMenu() {
            const GFG = document.querySelector('.links');
  
            if (GFG.style.display === "none") {
                GFG.style.display = "block";
            }
            else {
                GFG.style.display = "none";
            }
        }
    </script>
</body>
  
</html>

Output:



Hamburger Menu using Bootstrap: In this approach, we will use bootstrap to design our page and JavaScript work is same as in above method.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
  
    <link rel="stylesheet" href=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <title>GFG Hamburger Menu</title>
  
    <style>
        .icon,
        h5 {
            color: green;
        }
  
        .links a:hover,
        .icon:hover {
            background-color: green;
            color: white;
            transition: 0.4s all linear;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="pt-2 pb-2 border-bottom">
            <a class="icon pl-2 pr-2 p-1  
                float-right" href="#hamburger-icon" 
                onclick="gfgMenu()">
  
                <i class="fa fa-bars"></i>
            </a>
            <a class="pt-2 pb-2 text-success 
                text-decoration-none font-weight
                        -bold" href="#Home"
                Geeks For Geeks
            </a>
        </div>
        <div class="links nav flex-column d-none">
            <a class="nav-link border-bottom" 
                href="#gfg1"> Notes </a>
  
            <a class="nav-link border-bottom" 
                href="#gfg2"> Algorithm </a>
  
            <a class="nav-link border-bottom" 
                href="#gfg3"> Maths </a>
  
            <a class="nav-link border-bottom" 
                href="#gfg4"> Data Structure </a>
  
            <a class="nav-link border-bottom" 
                href="#gfg5"> Java </a>
        </div>
  
        <div class="container">
            <h5 class="my-2">Hamburger Menu</h5>
  
              
<p>
                Click on the icon present 
                at top left corner.
            </p>
  
        </div>
    </div>
      
    <script>
        function gfgMenu() {
            const GFG = document.querySelector('.links');
            if (GFG.classList.contains('d-none')) {
                GFG.classList.remove('d-none');
            }
            else {
                GFG.classList.add('d-none');
            }
        }
    </script>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :