+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Navigation identify menu items

Navigation identify menu items

8 posts, 0 answered
  1. Dragomir Enachi
    Dragomir Enachi avatar
    7 posts
    Registered:
    12 Nov 2009
    27 Jun 2011
    Link to this post
    Hello,

    Custom navigation that I use generates
    <li class="rsmItem"><a href="about-us" class="rsmLink">Page name</a></li>
    <li class="rsmItem"><a href="about-us" class="rsmLink">Page name</a></li>

    But I have to use background image for each page item (width different width, and hover), how is possible to add something like
    <li class="rsmItem item1"><a href="about-us" class="rsmLink">Page name</a></li>
    <li class="rsmItem item2"><a href="about-us" class="rsmLink">Page name</a></li>

    or
    <li class="rsmItem"><a href="about-us" class="rsmLink item1">Page name</a></li>
    <li class="rsmItem"><a href="about-us" class="rsmLink item1">Page name</a></li>

    or simply add id="item1",id="item2" to li class, to identify each menu item?

    I also have to create hover image, but I cannot identify each menu link to do that.

    Please advice asap.
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    02 Dec 2016
    27 Jun 2011
    Link to this post
    Hi Dragomir Enachi,

    Examples on achieving this functionality with custom navigation can be found on these resources from our Documentation:
    Use images to set the appearance of the menu
    Control the positioning of the image (ImageUrl)

    Please review them and if you have any additional questions, or you need some more information, do not hesitate to write back.


    Regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Dragomir Enachi
    Dragomir Enachi avatar
    7 posts
    Registered:
    12 Nov 2009
    13 Jul 2011
    Link to this post
    The problem is that the menu that I created doesn't add ACTIVE class to currently selected menu item. how can I fix it?
    If I use standard menu, I have rtsSelected class for current page item in menu, how can I add that class for selected if I use radmenu

    SO IT"S NOT HIGHLIGHTING CURRENTLY SELECTED MENU PAGE!!! PLEASE HEEELPP!!!!!!!

    The code I use is:
    <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Outlook" ShowPath="true">
       <Items>
           <telerik:RadMenuItem Text="Root Item 1" NavigateUrl="/welcome">
           </telerik:RadMenuItem>
           <telerik:RadMenuItem Text="Root Item 2" NavigateUrl="/about-us">
           </telerik:RadMenuItem>
       </Items>
    </telerik:RadMenu>

    and when I'm on welcome page or about-us page, currently selected menu item is not marked as active(hovered image)
  4. Phil Wilson
    Phil Wilson avatar
    18 posts
    Registered:
    22 Apr 2010
    14 Jul 2011
    Link to this post
    I'm having the exact same problem - that's why I'm here trolling this forum.

    In Sitefinity 3.7, there were classes called rmFocused, rmClicked and rmExpanded which worked great for tracking the state of a menu item but those all seem to be gone in Sitefinity 4.x's menu widget.

    I've probably spent 5 hours this evening trying to find the new equivalent.

    Hopefully, there's an easy way to address this issue.

  5. Dragomir Enachi
    Dragomir Enachi avatar
    7 posts
    Registered:
    12 Nov 2009
    14 Jul 2011
    Link to this post
    what is the easy way?
  6. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    02 Dec 2016
    14 Jul 2011
    Link to this post
    Hi ,

    Indeed there might be some confusion as in 4.x this class is "Selected" (e.g. rmSelected). If you're having problems with your custom implementation, one approach you can take is to get the current node (e.g.

    var currentNode = SiteMapBase.GetCurrentNode();) and set it as Active or use javascript to set it as selected :
    var currentNode = tree.findNodeByUrl(location);
                    if (currentNode) {
                        currentNode.set_selected(true);


    Kind regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Phil Wilson
    Phil Wilson avatar
    18 posts
    Registered:
    22 Apr 2010
    15 Jul 2011
    Link to this post
    It was actually easy (eventually).

    After some more research, and a little Firebugging, we did come to the same conclusion that there are new class names for the states of the navigation widget buttons. The classes .rmSelected and .rmExpanded did the trick for us as shown below:

    #mainNavigation .RadMenu .rmHorizontal .rmExpanded
    {
     background-color: #d5d4d4 !important;
     background-image: url(../Images/web_graphics/vertical_dot.jpg) !important;
     background-repeat: repeat-y !important;
     background-position: left !important;
     color: #0883b7 !important;
     text-decoration: none !important;
    }

    #mainNavigation .RadMenu .rmHorizontal .rmSelected
    {
     background-color: #d5d4d4 !important;
     background-image: url(../Images/web_graphics/vertical_dot.jpg) !important;
     background-repeat: repeat-y !important;
     background-position: left !important;
     text-decoration: none !important;
    }

    Hope this helps.
  8. John
    John avatar
    9 posts
    Registered:
    15 Jun 2011
    25 Jul 2011
    Link to this post
    @Dragomir Enachi

    If I am reading this correctly, you have an unordered list and you wish to target specific list items with no way of attaching a unique identifier to that any of the list items?

    A little known css technique for css pseudo classes should help you, pending you or your client does not have the need to add more pages to your navigation.

    ul li {margin: 0; padding: 0} /* targets the first list item */
    ul li+li {margin: 0; padding: 0} /* targets the second and all remaining list items */
    ul li+li+li {margin: 0; padding: 0} /* targets the third and all remaining list items */
    ul li+li+li+li {margin: 0; padding: 0} /* targets the fourth and all remaining list items */

    I hope you see where I am going with this. you could also use a more advanced way of writing the same thing as above, but if I recall correctly, some versions of IE do not support it.

    ul li:nth-child(2) {margin: 0; padding: 0} /* targets second list item only */
    ul li:nth-child(3) {margin: 0; padding: 0} /* targets third list item only */

    ul li:nth-child(4) {margin: 0; padding: 0} /* targets fourth list item only */

    I hope this helps.

8 posts, 0 answered