[Solved] 3 Image First Level Menu with mouseover

[Shaun]

Hi Everyone,
  My problem is that I currently need to implement a 3 image(Left/Center/Right) per item with mouse of functionality.  I am using the RadControls Menu for the first time but need to have the menu with rounded corners. What would you suggest?  Tried using the custom skin documentation which works but allows for a center repeat.  Looked for the skins per loaded but could not find one similar.  Can you help?

[Matthew Bishop]

Im not 100% sure if this is what you are after, but....

In a RadMenuItem you can use the <ItemTemplate> tag to surround almost any html you want. I used it to wrap a table with 3 images (low, med, high) and just put onclick commands on the images.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadMenu ID="RadMenu1" runat="server">
        <Items>
                <telerik:RadMenuItem runat="server" Text="Item 1">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text=""
                            NavigateUrl="javascript:void(0);">
                            <ItemTemplate>
                            <table width="100%">
                            <tr>
                            <td colspan="3" align="center">Title text 1</td>
                            </tr>
                            <tr>
                            <td><img src="low.gif" alt="" onclick="alert('Title text 1 - Low');" /></td>
                            <td><img src="med.gif" alt="" onclick="alert('Title text 1 - Med');" /></td>
                            <td><img src="High.gif" alt="" onclick="alert('Title text 1 - High');" /></td>
                            </tr>
                            </table>
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text=""
                            NavigateUrl="javascript:void(0);">
                            <ItemTemplate>
                            <table width="100%">
                            <tr>
                            <td colspan="3" align="center">Title text 2</td>
                            </tr>
                            <tr>
                            <td><img src="low.gif" alt="" onclick="alert('Title text 2 - Low');" /></td>
                            <td><img src="med.gif" alt="" onclick="alert('Title text 2 - Med');" /></td>
                            <td><img src="High.gif" alt="" onclick="alert('Title text 2 - High');" /></td>
                            </tr>
                            </table>
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text=""
                            NavigateUrl="javascript:void(0);">
                            <ItemTemplate>
                            <table width="100%">
                            <tr>
                            <td colspan="3" align="center">Title text 3</td>
                            </tr>
                            <tr>
                            <td><img src="low.gif" alt="" onclick="alert('Title text 3 - Low');" /></td>
                            <td><img src="med.gif" alt="" onclick="alert('Title text 3 - Med');" /></td>
                            <td><img src="High.gif" alt="" onclick="alert('Title text 3 - High');" /></td>
                            </tr>
                            </table>
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

Hope this helps,
Matt

[Shaun]

Matthew,
  This helps but my problem is a little different.

Let's say I have a nav item like Products in the top navigation menu.  I want products to have a
left.jpg(round corner)/center.jpg(repeat-x)/right.jpg(round corner) with the text Product being read from sitemap file. When the user mouseover the product it changes to another color of the 3images.  And the next nav item.  I am having the issue just have the first level with the nav item with mouseover function.  My submenu would be #FFFFFF.  Can I do this?