[Solved] Menu without animation

[Ørjan]

We are using the Telerik Menu controller with 2 levels. By default these are nicely layed out with an animation that expands the submenu when the parent element is hovered. However, we'd like the submenu items to always be expanded. Styling the menu such that the sub menus are nicely integrated in the menu is okay, but the problem is that the javascript still will toggle display: none/block on hover. Can this be disabled? 

[Dimo]

Hello Ørjan,

In order to achieve the desired behavior, you need to disable the Menu animation with:

Html.Telerik().Menu()
.Effects(fx => fx.Toggle())

This will prevent the subitems' shadow from disappearing.

Next, please add the following CSS rule:

.t-menu  .t-animation-container,
.t-menu  .t-group
{
     display: block !important;
     margin: 0 !important;
}

You can also use the Menu's ID instead of the t-menu CSS class.


Regards,
Dimo
the Telerik team

[Ørjan]

Excellent! This worked perfectly. 

Thank you very much for the help.