1. Home
  2. Forum
  3. Blazor
  4. Close the hamburger menu when you click outside of container

Close the hamburger menu when you click outside of container

Is it possible to close the hamburger menu when we click outside the menu container? Currently, we can close it only when we click on the hamburger menu icon.


4 Replies 1 reply marked as answer
GK Gayathri KarunaiAnandam Syncfusion Team February 9, 2022 04:27 PM UTC

Hi Vangel,


We need to validate and ensure more cases for your requirement. So, we will update details within February 14th,2022.


Regards,

Gayathri K


GK Gayathri KarunaiAnandam Syncfusion Team March 20, 2022 02:59 AM UTC

Hi Vangel, 
 
We have prepared a sample based on your requirement. Please check the below code snippet. 
 
[Index.razor]: 
 
@inject IJSRuntime JS 
<SfMenu @ref="MenuObj" TValue="MenuItem" HamburgerMode="true" ShowItemOnClick="true"> 
    <MenuItems> 
        <MenuItem Text="Appliances"></MenuItem> 
        <MenuItem Text="Mobile"></MenuItem> 
        <MenuItem Text="Entertainment" Url="https://www.google.com/search?q=home+theatres"></MenuItem> 
        <MenuItem Text="Fashion" Url="https://www.google.com/search?q=fashion"></MenuItem> 
        <MenuItem Text="Offers" Url="https://www.google.com/search?q=offers"></MenuItem> 
    </MenuItems> 
</SfMenu> 
 
@code{ 
    SfMenu<MenuItem> MenuObj; 
 
    protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
            var lDotNetReference = DotNetObjectReference.Create(this); 
            JS.InvokeVoidAsync("GLOBAL.SetDotnetReference", lDotNetReference); 
        } 
    } 
 
    [JSInvokable("HamburgerMenu")] 
    public void documentClick() 
    { 
        if (MenuObj != null) 
        { 
            MenuObj.CloseAsync(); 
            StateHasChanged(); 
        } 
    } 
} 
 
 
 
[_Host.cshtml]: 
 
<body onclick="bodyClick(event)"> 
     <script> 
        var GLOBAL = {}; 
        GLOBAL.DotNetReference = null; 
        GLOBAL.SetDotnetReference = function (pDotNetReference) { 
            GLOBAL.DotNetReference = pDotNetReference; 
        }; 
 
        function bodyClick(e) { 
            if (!document.querySelectorAll('.e-menu-header').length || !document.querySelectorAll('.e-menu-parent').length) { 
                return; 
            } 
            if(!e.target.classList.contains("e-menu-container") && e.target.closest('.e-menu-container') == null) { 
                if (GLOBAL.DotNetReference) { 
                    GLOBAL.DotNetReference.invokeMethodAsync("HamburgerMenu", "documentClick"); 
                } 
            } 
        } 
    </script> 
</body> 
 
 
For your reference, please check the below sample link. 
 
 
Please check and get back to us, if you need further assistance. 
 
Regards, 
Gayathri K 


Marked as answer
VK Vangel Kolarov June 10, 2022 12:50 PM UTC

Thank you Gayathri, it works like a charm. This is trivial behavior for such a menu and I suppose this functionality will be integrated into the control.


YA YuvanShankar Arunagiri Syncfusion Team June 30, 2022 02:28 PM UTC

Hi Vangel,


We are happy to hear your requirement has been fulfilled. We have analyzed this feature while implementing and this is the basic functionality of hamburger mode, so that we have provided this approach. If you need any further customization, the same is achievable in sample level.


Regards,

YuvanShankar A


Loader.
Up arrow icon