How to create Hamburger Menu for mobile devices ?

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="https://cdnjs.cloudflare.com/ajax/libs/font    -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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"        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:
Bootstrap-Misc
CSS-Misc
HTML-Misc
JavaScript-Misc
Bootstrap
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to set vertical alignment in Bootstrap ?
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form