Coffee Luv Bug Design System

Hamburger Menu

The hamburger menu is used to display the primary navigation in the header of our mobile application. It is used to move between pages in the application.

Here is the example of our app's hamburger menu,

Logo

Here is the html of our app's top nav bar,

            
            <div class="mobile-container">                                
            <div class="hambeurgernav">
            <a href="#home"><Logo></a>
            <div id="myLinks">
            <a href="#Link">Link</a>
            <a href="#Link">Link</a>
            <a href="#Link">Link</a>
            </div>
            <a href="javascript:void(0); 
            class="icon" onclick="myFunction()">
            <i class="fa fa-bars"> </i>
            </a> 
            </div>
            </div>

Here is the js code of our app's top nav bar,

            
            function myFunction() {
            var x = document.getElementById("myLinks");
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
            }