Navigation identify menu items

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.

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

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)

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.

what is the easy way?

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);

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.

@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.