This is a migrated thread and some comments may be shown as answers.

Menu not focussed/highlight with different color

3 Answers 129 Views

This is a migrated thread and some comments may be shown as answers.

sudhakar asked on 23 Nov 2010, 04:43 AM

Hello All,

Need an urgent help.

I am using the Radmenuitem in a User Contol and in Master Page.

I am trying to highlight the menu selected with different color else the user is lost in which menu is looking into.

I have to work on the Client side code, becuase when i click on the Menus the Page Load doesn't get called the Menu.ascx file.

Please help me with Setting teh CSS class on Client side when the Menu item is clicked.

I tried using OnClientItemClicked() but seems no difference.

Please find the code below.

<radM:RadMenu ID="mnuImport" Width="90%" runat="server" Skin="Black" OnClientItemClicked="ClientCSS();" CssClass="menu">

<Items>

<radM:RadMenuItem Text="Home" NavigateUrl="../home.aspx"></radM:RadMenuItem>

<radM:RadMenuItem Text="File" NavigateUrl="../home.aspx"></radM:RadMenuItem>

<radM:RadMenuItem Text="Edit" NavigateUrl="../home.aspx"></radM:RadMenuItem>

<radM:RadMenuItem Text="View" NavigateUrl="../home.aspx"></radM:RadMenuItem>

</Items>

</radM:RadMenu>

function ClientCSS(sender, eventArgs)

{

var menu = $find("<%= rmstabmenu.ClientID %>");

var item = menu.findItemByText(home);

if (item != null)

{

item.CssClass = "Focussed";

}

<style>

.Focused

{

color: Red !important;

background-color: Yellow !important;

}

</style>

3 Answers, 1 is accepted

answered on 24 Nov 2010, 11:35 AM

Hi Shinu,

I tried other way around instead of using event handlers as suggested.

The problem facing now is, when the Menu are hovered and selected it changes its color, but as soon as I click in the page or item below that menu it come to a default selection with same color as all other menu items. Difficult for the user on which menu is looking into.

Please suggest the solution for same. I need to change on the client side code only.

<head runat="server">

<title></title>

<style type="text/css">

.MainMenu

{

color: white !important;

background-color: #A8C2B9 !important;

}

.customFocused

{

color: Red !important;

background-color: Yellow !important

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<table style="width:100%">

<tr style="width:100%">

<td style="width:100%">

<telerik:RadMenu ID="rmstabmenu" runat="server" Skin="Black" EnableRoundedCorners="false" EnableShadows="true"

CollapseDelay="100" CollapseAnimation-Duration="100" ExpandAnimation-Duration="100" CssClass="MainMenu">

<Items>

<telerik:RadMenuItem runat="server" Text="This" FocusedCssClass="customFocused"></telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Yahoo" NavigateUrl="http://www.yahoo.com" Target="_blank" FocusedCssClass="customFocused"> </telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Google" NavigateUrl="http://www.google.com" Target="_blank"> </telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</div>

</form>

</body>

Regards
Sudhakar