WEBD 150 – Responsive mobile menus

Responsive Mobile Hamburger Menus

Responsive hamburger menus are failrly easy to build. All we need to essentially do is:

We can start by building the menus a regular menu and a mobile one, we can use media queries to show/hide depending on the screen size. We will also add the hamburger button in the normal menu but only show it when the screen is below a certain size.

        <div class="menu">
            <svg class="burger" viewBox="0 0 100 80" width="40" height="40" fill="currentColor">
                <rect width="100" height="15" rx="8"></rect>
                <rect y="30" width="100" height="15" rx="8"></rect>
                <rect y="60" width="100" height="15" rx="8"></rect>
            </svg>
            <ol>
                <li><a href="index.html">Home</a></li>
            </ol>
        </div>
        
        <div class="mobile-menu">
            <ol>
                <li><a id="close-menu-btn" href="#">Close Memu</a></li>
                <li><a href="index.html">Home</a></li>
            </ol>
        </div>
    

Under the menus, the rest of the regular boilerplate structure and content can go:

    <div class="main">
      <h1>Hello!!</h1>
    </div>
    

Optional – If you want to animate the HTML while the menu opens:

        html {
            transition: .3s all ease-in-out;
        }
    

In the CSS we can style the normal desktop menu as we usually would and also tell the burger menu to display none. Seeing as this is the CSS for the desktop, we dont want it on there!:

        .menu {
            height: 80px;
            background-color: #333;
        }
    
        .menu ol {
            margin: 0;
            padding: 0;
        }
    
        .menu ol li {
            display: inline-block;
        }
    
        .menu ol li a {
            color: white;
        }
    
        .burger {
            cursor: pointer;
            display: none;
        }
    

Now we will have to design the mobile menu for how it will load (0 width or height depending on how we want it to animate onto the screen. For this we will make it load from the left to right so width will be 0.)

        .mobile-menu {
            width: 0;
            overflow: hidden;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #000;
            color: #fff;
            transition: .3s all ease-in-out;
            height: 100vh;
        }
    

Now we will need a @media screen and () {} query. We will make it for 800px and below and make it show the burger button and hide the desktop menu at the same time:

        @media screen and (max-width: 800px) {
            /* this will override the display none we did above */
            .burger {
                display: block;
            }
            .menu ol {
                display: none;
            }
        }
    

Now we need to use some JS to wire it all up and make it work.

1st step insert the html elements we will use into variables to make it cleaner:

        //we need to gather all the elements and put then into variables so we can manipulate them:

        // The burger button to open the menu
        const burgerBtn = document.querySelector('.burger');
        // The close button to close the menu
        const closeMenuBtn = document.getElementById('close-menu-btn');
        // the mobile menu bar
        const mobileMenu = document.querySelector('.mobile-menu');
    

After that we can make 2 functions. One to open the menu and one to close it:

        // then we have to make 2 functions, one to open the mobile menu and one to close it
        function openMobileMenu() {
            mobileMenu.style.width = '100vw';
            //optional below - move the html with the animated mobile menu
            document.querySelector('html').style.marginLeft = '100vw';
        }
    
        function closeMobileMenu() {
            mobileMenu.style.width = '0vw';
            //optional below - move the html with the animated mobile menu
            document.querySelector('html').style.marginLeft = '0vw';
        }
    

Now we can activate the buttons using event listeners:

        // then we have to make the buttons work by calling the functions on them
        burgerBtn.addEventListener('click', openMobileMenu);
        closeMenuBtn.addEventListener('click', closeMobileMenu);
    

And thats it! A functional mobile menu!

Categorised in: Lectures, Portfolio, WEBD 150

This post was written by amax