[Solved] Open menu on click

[Lucas]

Hello,

I was wondering if there was anyway to only open a menu on click instead of on hover. We have a menu that is relatively close to some other controls and our users are accidentally seeing the menu when trying to click on something close to the menu. 

I would rather the user have to click on a menu item to open the menu drop down.

If there is a CSS way to do this I am using the Office2010Silver theme.

Any ideas?

Thanks!

-Lucas

[Daniel]

Hi Lucas,

You should use the OpenOnClick configuration method to enable this behavior:

Html.Telerik().Menu()
    .Name("menu")
    .OpenOnClick(true)

Greetings,
Daniel
the Telerik team

[Lucas]

Hi Daniel,

Thanks for your quick response! That worked! 

The only thing I am now seeing is that when my mouse hovers outside of the menu, it doesnt close.

Is there anyone to re-enable this feature? Also I would like the menu to close upon clicking on the menu.

Thanks,
Lucas

[Daniel]

Hi Lucas,

The described behavior is not supported out of the box but can be achieved with some additional code. Basically, you should:

1.  Disable the OpenOnClick option.
2. Bind to the mouseenter event of the top level items and stop the event so that it doesn't reach the Menu handler. You should also add the "t-state-hover" class to the element with class "t-link" to achieve the same look when stopping the event.
3. Add a handler to the OnSelect client-side event and use the client API to close/open the main items.

For example:

//Menu OnLoad event
function onLoad() {
    $(this).find('> .t-item').mouseenter(function (event) {
        $(this).find('> .t-link').addClass('t-state-hover');
        event.stopPropagation();
    });
}
//Menu OnSelect event
function onSelect(e) {
    var $item = $(e.item);
    // if  a top-level item is selected
    if ($item.parent().is('.t-menu')) {
        var menu = $(this).data("tMenu");
        // if there are opened sub-items close the item else open it
        if ($item.find('.t-group:visible').length) {
            menu.close($item);
        }
        else {
            menu.open($item);
        }
    }
}

Regards,
Daniel
the Telerik team