[Solved] 2 Menus 2 Different Styles

[Jason Heine]

Hello,

I have 2 rad menus on my page. One for the main site navigation and the other for general content navigation.

The main site navigation has the following properties:

<telerik:RadMenu ID="mainMenu" runat="server" EnableEmbeddedSkins="False">

I have custom images I am using for this menu.

My 2nd menu is just a standard menu with EmbeddedSkins turned on. The problem is with EmbeddedSkins turned on in the 2nd menu, it enables it in the first menu as well.

How can I enable in one and disable in the other without affecting both menus?

thanks

[Cori]

Hello Jason,

Could you show us this? I don't see how setting a property in one RadMenu would affect the other.

[Jason Heine]

Hello,

Okay I have attached 2 images. Capture 1.png shows a menu on the top with the following code:

<table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td class="LoginHeaderLeft" style="padding-top: 17px;">
                <telerik:RadMenu ID="mainMenu" runat="server" EnableEmbeddedSkins="False">
                    <Items>
                        <telerik:RadMenuItem NavigateUrl="~/Default.aspx" Value="HOME_PAGE" ImageUrl="../../App_Themes/Default/Images/Navigation/BtnMyHome_off.png"
                            HoveredImageUrl="../../App_Themes/Default/Images/Navigation/BtnMyHome_on.png"
                            Style="cursor: pointer">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Value="CUSTOM_PAGES" ImageUrl="../../App_Themes/Default/Images/Navigation/BtnMyPages_off.png"
                            HoveredImageUrl="../../App_Themes/Default/Images/Navigation/BtnMyPages_on.png"
                            Style="cursor: pointer">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem ImageUrl="../../App_Themes/Default/Images/Navigation/BtnAdmin_Off.png"
                            HoveredImageUrl="../../App_Themes/Default/Images/Navigation/BtnAdmin_On.png"
                            Visible="false" Value="ADMIN_MENU" Style="cursor: pointer">
                            <Items>
                                <telerik:RadMenuItem Value="SME_ADMIN" NavigateUrl="~/Pages/SME/Default.aspx" Text="SME Admin">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="REQUEST_ACCESS" NavigateUrl="~/Pages/Security/RequestAccess.aspx"
                                    Text="Request Site Access">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="PAGE_ADMIN" NavigateUrl="~/Pages/CustomPages/CustomPageAdmin.aspx"
                                    Text="User Page Creation">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem ImageUrl="../../App_Themes/Default/Images/Navigation/BtnService_off.png"
                            HoveredImageUrl="../../App_Themes/Default/Images/Navigation/BtnService_on.png"
                            Value="LINKS" Style="cursor: pointer">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem ImageUrl="../../App_Themes/Default/Images/Navigation/BtnLogout_off.png"
                            HoveredImageUrl="../../App_Themes/Default/Images/Navigation/BtnLogout_on.png"
                            Value="LOG_ON" NavigateUrl="~/Pages/Logon/Logout.aspx" Style="cursor: pointer">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>
            </td>
            <td class="LoginHeaderMiddle">

            </td>
            <td class="LoginHeaderRight">
            </td>
        </tr>
    </table>
    <telerik:RadMenu ID="RadMenu1" runat="server" EnableEmbeddedSkins="false">
        <Items>
            <telerik:RadMenuItem NavigateUrl="http://www.google.com" Text="Google Link">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem NavigateUrl="http://www.yahoo.com" Text="Yahoo Link">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

Notice that EnableEmbeddedSkins = False on both of them.

Now, when I take the 2nd menu, and REMOVE the EnableEmbeddedSkings="false" I get the 2nd attached image "Capture 2.png"

<telerik:RadMenu ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem NavigateUrl="http://www.google.com" Text="Google Link">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem NavigateUrl="http://www.yahoo.com" Text="Yahoo Link">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Hope this helps.

[Kamen Bundev]

Hello Jason,

The problem is that you skins have the same names, thus they share the same CSS classes and the second menu overrides the first. Nothing can be done from our side to stop that. Just rename your external skin to avoid it (in the external skin CSS file change RadMenu_Default to RadMenu_YourSkin and then set the skin in the menu definition with Skin="YourSkin").

All the best,
Kamen Bundev
the Telerik team