highlighting current page in RadMenu

[Jay Wortham]

I'm working on a project that needs a menu system very close to the menu at the top of this page. I need to use a background image for the main menu, a different background image for the rollover state and yet another image for the "current" page state. I started off with the Web2.0 skin and made everything work but the current page part. (rollover and current both match in my skin and when I try and separate the hover from the current state in the CSS file it stops working).

Could someone please help me either find a skin that is all ready set up with a current page graphic or walk me through the steps involved in creating/modifying a skin so it shows the current page like the menu above where community is the current state. I don't mind starting over with a new skin file if needed.

I am a designer not a programmer so if coding is needed please give me step by step instructions :)

Thanks in advance
Jay

[Yana]

Hello Jay,

Please set EnableSelection property of RadMenu to true and then you can select the current item and also use "rmSelected" css class in the skin to style it.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jay Wortham]

Hi Yana,

I have EnableSelection set and that part seems to be working.

The selected page shows the rollover background image from the skin as the selected page. My problem is in making the "selected" menu item show up using a different graphic. (not part of the web2.0 skin I modified) so I made a seperate image for that, again it works. The way the CSS file is now the "rmSelected" tag is in 4 different styles and each style has rmLink, rmFocused, rmExpanded and rmExpanded:hover in the same style. When I add a background image for the selected tag it becomes the image for everything (focus, rollover and current). I trird breaking out the rmSelected tag and everything quit working.

Is there another skin or template I can start with that has three states for the menu included. I need a regular state, a hover state and a current state. What I am looking for is very similar to what you are using on the top of this page. None of the downloads I found have three states.

Thanks Again
Jay

[Yana]

Hello Jay,

I've attached a very simple page demonstrating the three states of RadMenuItems. What is different in your case?

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dan]

I've been asked to implement a RadMenu that highlights the top-level item corresponding to the overall section containing the current page. For example, if the current page is about a particular service, then the "Service" item would be highlighted. I see that you've recommended setting the EnableSelection property, and the weird thing is, that property is already set to true, but I still can't get the highlighting to work. My understanding of what should happen is that when EnableSelection is true, the top-level item corresponding to current page's section should have an added class name (say, rmSelected) in its class attribute, but I don't see it anywhere. I can post code if needed.
Thanks!
Dan

[Peter]

Hi Dan,

Probably, you need Show Path functionality as shown in this demo.

You can also check this kb article and decide if you can use it for your case.


Best wishes,
Peter
the Telerik team

[Ky]

Hi Yana/Peter,

Ive been trying to get this working for the DNN skinobject - will this work?

Ive added the line "EnableSelection="True"" to the radmenu skinobject code, and added the line to the CSS:

.RadMenu_Menu .rmRootGroup .rmItem .rmSelected {color:#F00;}

However, still cant seem to get it to work?

My example: http://decina.com.au.dnnmax.com/Home.aspx

Ky

[Peter]

Hello Ky,

The RadMenu DNN skin object provides this as a built-in functionality - you just need to set ShowPath="true" for RadMenu. Here is the API reference table for your perusal.


Regards,
Peter
the Telerik team