How to create Hamburger Menu for mobile devices ?

0 0 2 minutes read

In this article, we will create a Hamburger Menu for mobile devices.

The hamburger button is the button 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 onclick events. The basic approach is to mark the visibility of the navigation bar as 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> 
</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> 
</body> 
</html>

CSS

.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; 
}

Javascript

<script> 
    function gfgMenu() { 
        const GFG = document.querySelector('.links'); 
      
        if (GFG.style.display === "none") { 
            GFG.style.display = "block"; 
        } 
        else { 
            GFG.style.display = "none"; 
        } 
    } 
</script>

Output: Click here to check the live Output.

Hamburger Menu using Bootstrap: In this approach, we will use bootstrap to design our page and JavaScript work is the same as in the 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> 
</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> 
</body> 
</html>

CSS

<style> 
    .icon, 
    h5 { 
        color: green; 
    } 
      
    .links a:hover, 
    .icon:hover { 
        background-color: green; 
        color: white; 
        transition: 0.4s all linear; 
    } 
</style>

Javascript

<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>