V minulém stejnojmenném článku jsme si připravili menu v HTML a CSS. Dnes celou funkcionalitu zprovozníme za pomoci JavaScriptu. Využijeme k tomu knihovnu jQuery. Na konci článku potom naleznete odkaz, jehož prostřednictvím si budete moci ukázkový kód stáhnout ve formátu zip.

Nejprve si vytvoříme funkce pro přepínání mobilního menu a k nim příslušné obsluhy událostí. Protože nebudeme používat objektové programování, zanoříme celý kód do anonymní funkce, aby se předešlo případným problémům s redeklaracemi funkcí.

( 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");
    }   
})();

Obě funkce akorát přidávají respektive odebírají třídu „mobile“ vybraným elementům. Mobilní menu se zapne po kliknutí na hamburgerové tlačítko. Vypínat se bude kliknutím mimo menu do zašedlé plochy (element „dark-cover“) nebo prostřednictvím tlačítka s křížkem. To si přidáme nyní spolu s tlačítkem Home, které bude sloužit pro přechod na domovskou stránku.

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

Funkce addCloseButton vytváří tlačítko s pluskem, které jsme nastylovali tak, aby se pootočilo o 45 stupňů a vytvořilo tak křížek. K těmto dvou metodám vytvoříme ještě „odebírací“ funkce.

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

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

Na závěr přidáme spouštění funkcí v závislosti na šířce okna prohlížeče. Jako breakpoint jsme zvolili hranici 800px.

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();  
        }
    }
});

Tím jsme celý malý projekt mobilního menu dokončili. Pokud jste došli až sem, měli byste mít jeho funkční podobu také. Celý projekt si můžete nyní stáhnout ve formátu zip pod tímto odkazem.