Change appearance of one menuitem when mouse is over another menuitem OnClientMouseOver

2 posts, 0 answers
  1. Brenda
    Brenda avatar
    1 posts
    Member since:
    Jul 2008

    Posted 20 Aug 2008 Link to this post

    Should I be able to use the following code to set the css class on a menuitem?  I currently set a the css class of the menuitem associated with the current page to rmFocused when they are loaded into the menu.  I am trying to set that menuitem to not appear focused if someone hovers over a different menuitem than set it back after mouse out.

    <%

    @ Control Language="C#" AutoEventWireup="true" CodeBehind="TopNavigation.ascx.cs" Inherits="EquagenComAdmin.admin.TopNavigation" %>

    <%

    @ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <

    script language="javascript" type="text/javascript">

    function

    OnMouseOverItem(menu,args)

    {

    var item=args.get_item();

    var items=menu.get_items();

    for(var i=0;i<items.get_count();i++)

    {

    if(items.getItem(i).get_text() == document.title && items.getItem(i).get_text() != item.get_text())

    {

    items.getItem(i).set_cssClass(

    "");

    break;

    }

    }

    }

    function

    OnMouseOutItem(menu,args)

    {

    var item=args.get_item();

    var items=menu.get_items();

    for(var i=0;i<items.get_count();i++)

    {

    if(items.getItem(i).get_text() == document.title && items.getItem(i).get_text() != item.get_text())

    {

    items.getItem(i).set_cssClass(

    "rmFocused");

    break;

    }

    }

    }

    </

    script>

    <

    asp:Label ID="MenuResult" runat="server" />

    <

    telerik:RadMenu ID="TopNavigationMenu" runat="server" Flow="Horizontal" OnClientMouseOver="OnMouseOverItem" OnClientMouseOut="OnMouseOutItem" Width="100%" Skin="EQN" EnableEmbeddedSkins="false">

    </

    telerik:RadMenu>

  2. Don Johnson
    Don Johnson avatar
    2 posts
    Member since:
    Jul 2008

    Posted 21 Aug 2008 Link to this post

    I changed the javascript to the following and it worked.

    <

    script language="javascript" type="text/javascript">

    function OnMouseOverItem(menu,args)

    {

    var item=args.get_item();

    var items=menu.get_items();

    for(var i=0;i<items.get_count();i++)

    {

    var linkElement=items.getItem(i).get_linkElement();

    if(items.getItem(i).get_text() == document.title && items.getItem(i).get_text() != item.get_text())

    {

    linkElement.style.background=

    "url(../images/bg_menu.gif) repeat-x";

    linkElement.style.color=

    "#8b897d";

    break;

    }

    }

    }

    function OnMouseOutItem(menu,args)

    {

    var item=args.get_item();

    var items=menu.get_items();

    for(var i=0;i<items.get_count();i++)

    {

    var linkElement=items.getItem(i).get_linkElement();

    if(items.getItem(i).get_text() == document.title && items.getItem(i).get_text() != item.get_text())

    {

    linkElement.style.background=

    "url(../images/bg_menu-a.gif) repeat-x";

    linkElement.style.color=

    "#ef3e42";

    break;

    }

    }

    }

    </

    script>

Back to Top