How to use images instead of text.

[Jason Denman]

I want the menu to have images instead of text. I already have the images. I want it to be a vertical menu that when the mouse hovers over a root menu item, the sub menu items expand to the right. All menu items would be images that I provide.

Part of the images include the text of the menu item (rather than having the text written out, it is part of the image).

When I add the image as ImageUrl it displays the image over top where the text would be, but still has a space for the text even when the text is left blank. The sub menu also appears under the root item rather than to the right of it.

Is it possible to change a Telerik Menu to do what I want?

[Yana]

Hi Jason Denman,

Please check this online example demonstrating images only menu. You should only set the css styles:

<style type="text/css">
        div.RadMenu a.rmLink .rmLeftImage
        {
            position: relative;
        }

        div.RadMenu .rmItem .rmLink .rmLeftImage,
        div.RadMenu .rmItem .rmLink,
        div.RadMenu .rmLink .rmText
        {
            margin: 0;
            padding: 0;
        }
</style>

Regards,
Yana
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.

[Jason Denman]

This has gotten me close to what I need.

I still have an annoying border around all of the menu items that I need to get rid of. I would guess that I would need to set a border=0 in css for some elements, but I don't know which elements to use.

How do I get rid of all borders and spaces so that my images are right next to each other?

The background image of all the menu items together needs to be unbroken.

Thank You,
Jason Denman

[Yana]

Hi Jason,

Did you set the Skin property to an empty string as in the example:

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="" ... />

in this way no skin is used and no border should be set.

Kind regards,
Yana
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.

[Jason Denman]

Hi Yana,

Setting the Skin="" got rid of the annoying borders. Thanks for that. It gets me really close to what I need.

I have a vertical menu of images, where the submenu expands to the right. What I want is to have it so that the submenus expand from a point 17 pixels to the left of where they expand from now.

Is there a way to change the X expand offset to -17?

Thanks again,
Jason

[Yana]

Hi Jason,

Please check this online example which shows how achieve this.

All the best,
Yana
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.

[Jason Denman]

Yana,

I got the GroupSettings OffsetX to work. I think the next part that I need is for the cursor to change to a hand with a pointing finger while it is over the menu, rather than being the default arrow.

How can I change the mouse cursor?

I plan to have this menu on a master page. How can I make it so that when a page is selected, the menu item that corresponds to that page has a different image?

Thanks,
Jason

[Jason Denman]

For the cursor, I am pretty sure I need to select { cursor:pointer; } for an item in the style sheet, but I don't know to which name to apply that style.

For the selected pages, I have set the SelectedImageUrl, but I dont know how the RadMenu will know it is selected.

[Jason Denman]

OK, so I got the mouse cursor taken care of.

I found an example that uses code behind and in the Page_Load it has:
            RadMenuItem currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);
            if (currentItem != null)
            {
                //Select the current item and his parents
                currentItem.HighlightPath();
                ...


I don't know what currentItem.HighlightPath() does. I think I want to replace that with something that will cause the sub-menu item to be selected. What can I change the "HighlightPath" to that will cause the "currentItem" to be selected?

Thank You,
Jason

[Jason Denman]

I can set currentItem.Selected = true. This makes the item selected.

I now have 2 problems.
1. The selected item doesn't change image until after i hover over it. The hoverd image is the same as the selected image. What do I need to do to have the image change to the selected image before being hovered over.

2. When a sub-menu item is selected, I also want the parent menu item to have its image changed to the selected image (which again is the same as the hoverd image). How do I change the parent menu's image when the child sub-menu is selected?

Thank You for any help you can provide for this,
Jason

[Peter]

Hello Jason,

In the Show Path And BreadCrumb, the HighlightPath() method is built-in and it applies "rmSelected" class to all items up the hierarchy that are parents to the current item. This way show-path is accomplished. You can easily implement show-path with images using the code below (it assumes you have ImageUrl and SelectedImageUrl specified for the menu items):

protected void Page_Load(object sender, EventArgs e)
    {
        RadMenuItem currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery);
        if (currentItem != null)
        {
            HighlightPathWithImage(currentItem);
        }
        else
            HighlightPathWithImage(RadMenu1.Items[0]);

    }
    protected void HighlightPathWithImage(RadMenuItem item)
    {
        item.ImageUrl = item.SelectedImageUrl;
        if (item.Parent.GetType().Name == "RadMenuItem")
        {
            ((RadMenuItem)item.Parent).ImageUrl = item.SelectedImageUrl;
            HighlightPathWithImage((RadMenuItem)item.Parent);
        }
    }

    //If you do not set the NavigateUrl property for the items, you should handle ItemClick
    //as follows:
    //protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
    //{
    //    HighlightPathWithImage(e.Item);
    //}

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