In the previous article of the same name, we prepared a menu in HTML and CSS. Today, we will implement the entire functionality using JavaScript. We will use the jQuery library for this. At the end of the article, you will find a link through which you can download the sample code in zip format.

First, we will create the functions for switching the mobile menu and their corresponding event handlers. Since we will not be using object-oriented programming, we will embed all the code in an anonymous function to avoid any problems with function redeclarations.

( function() {
    $("#menu-control a").click(function(){
        mobileMenuOn();
    });
        
    $(".dark-cover").click(function(){
        mobileMenuOff();
    });

    function mobileMenuOn(){
        $("#page").addClass("mobile");
        $(".primary-menu-container").addClass("mobile");
    }
        
    function mobileMenuOff(){
        $("#page").removeClass("mobile");
        $(".primary-menu-container").removeClass("mobile");
    }   
})();

Both functions just add or remove the “mobile” class from the selected elements. The mobile menu is enabled by clicking the hamburger button. It can be disabled by clicking outside the menu into the grayed area (“dark-cover” element) or by using the button with a cross. We will now add this together with the Home button, which will be used to go to the home page.

function addCloseButton(){
    var button = $("<a />").addClass("close-button").text("+").click(function(){
         mobileMenuOff();
    });

    var li = $("<li />").append(button);
            
    $(".primary-menu-container ul").prepend(li);
} 

function addHomeButton(){
    var pathToHomePage = "#"; // místo hashe zadejte libovolnou URL
    var button = $("<a />").addClass("home-button").text("Home").attr("href", pathToHomePage);
          
    var li = $("<li />").append(button);
            
    $(".primary-menu-container ul").prepend(li);
}      

The addCloseButton function creates a plus button that we styled to rotate 45 degrees to create a cross. We will also create “removal” functions for these two methods.

function removeCloseButton(){
    $(".close-button").parent("li").remove();
}

function removeHomeButton(){ 
    $(".home-button").parent("li").remove(); 
 }

Finally, we will add functions that run based on the width of the browser window. We chose the 800px boundary as a breakpoint.

if (window.innerWidth >= 800){
    removeHomeButton();
    removeCloseButton();     
}
else{
    addHomeButton();
    addCloseButton(); 
}
                
$(window).resize(function (){
    if (window.innerWidth >= 800){
        mobileMenuOff();
                
        if ($(".close-button").length > 0){
            removeHomeButton();
            removeCloseButton();
        }  
    }
    else{
        if ($(".close-button").length == 0){
            addHomeButton();
            addCloseButton();  
        }
    }
});

This completes the entire small mobile menu project. If you’ve made it this far, you should have a working version of it as well. You can now download the entire project in zip format from this link.