1. Home
  2. Forum
  3. Blazor
  4. Open docked side bar menu on mouseover

Open docked side bar menu on mouseover

Hi,

I'm try to get a dock sidebar containing a vertical menu to open on mouseover. The SfSidebar does not expose the mouseover event. I tried wrapping it in a div and putting the mouseover event there but this does not work as the side is created outside the div block.

On a seperate question where are styles such as dock-menu documented?

@using Syncfusion.Blazor.Navigations
<div id="wrapper">
    <div class="col-lg-12 col-sm-12 col-md-12">
        <div class="header-section dock-menu" id="header">
            <ul class="header-list">
                <li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li>
                <!-- <input type="text" placeholder="Search..." class="search-icon list"> -->
                <li class="right-header list">
                    <div class="horizontal-menu">
                        <SfMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></SfMenu>
                    </div>
                </li>
                <li class="right-header list support">Support</li>
                <li class="right-header list tour">Tour</li>
            </ul>
        </div>

        <!-- sidebar element declaration -->
        <div style="z-index:1999" @onmouseover="@onmouseover">
            <SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar">
                <ChildContent>
                    <div class="main-menu">
                        <div>
                            <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu>
                        </div>
                    </div>
                </ChildContent>
            </SfSidebar>
        </div>

        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div class="main-content" id="maintext">
            <div class="content">
                <div> Responsive Sidebar with Menu</div>
            </div>
        </div>
        <!--end of main content declaration -->

    </div>
</div>

@code {
    SfSidebar Sidebar;
    public Orientation Orientation = Orientation.Horizontal;
    public Orientation VerOrientation = Orientation.Vertical;
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
    {
        {"class", "sidebar-menu" }
    };
    public List<MenuItem> AccountMenuItems = new List<MenuItem> {
        new MenuItem {
            Text = "Account",
            Items = new List<MenuItem> {
                new MenuItem { Text = "Profile" },
                new MenuItem { Text = "Sign out" }
            }
        }
    };
    public List<MenuItem> MainMenuItems = new List<MenuItem>{
        new MenuItem {
            Text = "Overview", IconCss = "icon-user icon",
                Items = new List<MenuItem> {
                    new MenuItem{ Text = "All Data" },
                    new MenuItem{ Text = "Category2" },
                    new MenuItem{ Text = "Category3" }
                }
            },
        new MenuItem {
            Text = "Notification",
            IconCss = "icon-bell-alt icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Change Profile" },
                new MenuItem{ Text = "Add Name" },
                new MenuItem{ Text = "Add Details" }
            }
        },
        new MenuItem {
            Text = "Info",
            IconCss = "icon-tag icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Message" },
                new MenuItem{ Text = "Facebook" },
                new MenuItem{ Text = "Twitter" }
            }
        },
        new MenuItem {
            Text = "Comments",
            IconCss = "icon-comment-inv-alt2 icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Category1 " },
                new MenuItem{ Text = "Category2" },
                new MenuItem{ Text = "Category3" }
            }
        },
        new MenuItem {
            Text = "Bookmarks",
            IconCss = "icon-bookmark icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "All Comments" },
                new MenuItem{ Text = "Add Comments" },
                new MenuItem{ Text = "Delete Comments" }
            }
        },
        new MenuItem {
            Text = "Images",
            IconCss = "icon-picture icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Add Name" },
                new MenuItem{ Text = "Add Mobile Number" }
            }
        },
        new MenuItem {
            Text = "Users",
            IconCss = "icon-user icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Mobile User" },
                new MenuItem{ Text = "Laptop User" },
                new MenuItem{ Text = "Desktop User" }
            }
        },
        new MenuItem {
            Text = "Settings",
            IconCss = "icon-eye icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Change Profile" },
                new MenuItem{ Text = "Add Name" },
                new MenuItem{ Text = "Add Details" }
            }
        },
        new MenuItem {
            Text = "Info",
            IconCss = "icon-tag icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Facebook" },
                new MenuItem{ Text = "Mobile" }
            }
        }
    };
    public void Toggle()
    {
        this.Sidebar.Toggle();
    }


    public void onmouseover()
    {
        if (this.Sidebar.IsOpen == false)
          this.Sidebar.Show();
    }
}







3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team August 19, 2020 12:53 PM UTC

Hi Michael Aston,  
 
Greetings from Syncfusion support. 
 
Query1-  Open the sidebar on mouse hover. 
 
You have created a div outside the Sidebar component, when hovering the div element, onmouseover event is triggered correctly on that particular div. Based on your shared details, we suspect that your requirement is to open the sidebar element when hovering on meu items. To achieve this,  you can bind the events to the element above the menu component. 
 
Refer to the below code snippet. 
            <SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar"> 
                <ChildContent> 
                    <div class="main-menu"> 
                        <div> 
                            <div  @onmouseover="@onmouseover"> 
                                <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu> 
                            </div> 
                            </div> 
                        </div> 
                </ChildContent> 
            </SfSidebar> 
public void onmouseover() 
    { 
        if (this.Sidebar.IsOpen == false) 
            this.Sidebar.Show(); 
    } 
 
 
Refer to the sample link below. 
 
Else, if you want to bind the onmouseover to entire sidebar component. You need to bind the event for the div wrapping both Sidebar and main-content area. 
 
Refer to the below code snippet. 
    <div style="z-index:1999" @onmouseover="@onmouseover"> 
            <SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar"> 
                <ChildContent> 
                    <div class="main-menu"> 
                        <div> 
 
                            <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu> 
 
                        </div> 
                    </div> 
                </ChildContent> 
            </SfSidebar> 
            <!-- end of sidebar element --> 
            <!-- main content declaration --> 
            <div class="main-content" id="maintext"> 
                <div class="content"> 
                    <div> Responsive Sidebar with Menu</div> 
                </div> 
            </div> 
        </div> 
 
 
If we have misunderstood your requirement, could you please share the exact details regarding your requirement. The use case scenario for which you are expecting the mouse hover events on sidebar component? 
 
Query2 - On a seperate question where are styles such as dock-menu documented? 
 
The styles are added in the style section in the below link. And also, we have added the styles in the attached sample. 
 
 
When you set the EnableDock as true, it closes the sidebar component based on dock size. Refer the below link to know more about the Dock property. 
 
 
Refer to the below links to know more about the Sidebar component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
MA Michael Aston August 19, 2020 03:55 PM UTC

Ok that's clear.

Thanks

SP Sowmiya Padmanaban Syncfusion Team August 20, 2020 04:36 AM UTC

Hi Michael,  
  
Most Welcome. We are happy to hear that your issue has been resolved. Please contact us, if you need any help fom us. 
  
Regards,  
Sowmiya.P 


Loader.
Up arrow icon