Custom Animation type

[Sébastien]

Hello,

I'm using RadMenu under DotNetNuke host. I actually own a developper license without source code.I would like to use a completly custom animation when the sub menus opens. I would like to implement a simple fade-in-out effect in front of th default effect, but this don't seems to be accessible for the RadMenu (but it's registered in $TWA object line 331).
What is the best way to overrides/modify the current show/hide/animation system ? May I use the OnClientItemOpen and OnClientItemClose attributes to call a custom Javascript function ?

Cheers,

S.F.

[T. Tsonev]

Hello Fichot,

The animation cannot be directly customized, but we can achieve the desired effect using jQuery. Here is the code for the fade-in:

<script type="text/javascript">
    function itemOpening(sender, eventArgs)
    {
        // jQuery is registered as $telerik.$
        $telerik.$(eventArgs.get_item().get_childListElement())
            .stop()                            // stop current animation, if any
            .css({opacity : 0})                // make the element transparent
            .animate({opacity: 1}, 1000);    // fade in 1000 milliseconds
    }
</script>

The jQuery library is included in the Q3 release, but RadMenu does not use it at the moment, so you will need to include the scripts manually:

        <asp:ScriptManager ID="ScriptManager" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            </Scripts>
        </asp:ScriptManager>

You can, of course, use a standalone version of jQuery. You can read more about the jQuery integration in our controls here:

http://blogs.telerik.com/AtanasKorchev/Posts/08-11-06/ASP_NET_Ajax_Controls_and_jQuery.aspx


Greetings,
Tsvetomir Tsonev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.