highlighting current page in RadMenu

8 posts, 0 answers
  1. Jay Wortham
    Jay Wortham avatar
    2 posts
    Member since:
    Dec 2009

    Posted 15 Dec 2009 Link to this post

    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




  2.
  3. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 17 Dec 2009 Link to this post

    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.
  5. Jay Wortham
    Jay Wortham avatar
    2 posts
    Member since:
    Dec 2009

    Posted 31 Dec 2009 Link to this post

    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
  7. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 05 Jan 2010 Link to this post

    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.
  9. Dan
    Dan avatar
    25 posts
    Member since:
    May 2008

    Posted 10 Aug 2010 Link to this post

    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
  11. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 10 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Ky
    Ky avatar
    5 posts
    Member since:
    Sep 2010

    Posted 26 Oct 2010 Link to this post

    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
  14.
  15. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 01 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top