Radmenu and Separator

[Kurt Kluth]

I am trying to utilize the RadMenu into our site so it looks like the attached image.  I can't seem to get it to render correctly.  I have tried setting EnableEmbeddedBaseStyleSheet = False and EnableEmbeddedSkins=False and the results were less than desirable. 

Any suggestions

<telerik:RadMenu ID="RadMenu1" runat="server" Width="100%"
                            EnableRoundedCorners="False" EnableShadows="False" EnableTextHTMLEncoding="True"
                            style="z-index:2900;" EnableEmbeddedBaseStylesheet="true" BackColor="#706259" Font-Bold="true" Font-Names="Arial"
                             >
                            <Items>
                                <telerik:RadMenuItem runat="server" NavigateUrl="/BoardReports/Default.aspx"
                                    Text="Board Reports">
                                    <Items>
                                        <telerik:RadMenuItem runat="server"
                                            NavigateUrl="/BoardReports/Manage_BoardPackets.aspx"
                                            Text="Board Reporting Management" Visible="false">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" IsSeparator="True" Text="/" />

                                <telerik:RadMenuItem runat="server" NavigateUrl="~/cuDataAnalysis/default.aspx"
                                    Text="CU Data Bank" ForeColor="White" Font-Names="Arial">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" NavigateUrl="~/cuDataAnalysis/cuDSInd.aspx"
                                            Text="Individual CU Search">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Custom CU Search" NavigateUrl="~/cuDataAnalysis/CUCustomSearch.aspx">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" IsSeparator="True" Text="/" />

[Ivan Danchev]

Hello Kurt,

Instead of setting Menu items as separators, since they do not display any text, you can consider a different approach consisting of using regular items, with a modified look and behavior so that they act as separators.
For example:

<div>
    <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%"
        EnableRoundedCorners="False" EnableShadows="False" EnableTextHTMLEncoding="True"
        Style="z-index: 2900;" EnableEmbeddedBaseStylesheet="true" BackColor="#706259" Font-Bold="true" Font-Names="Arial">
        <Items>
            <telerik:RadMenuItem runat="server" NavigateUrl="/BoardReports/Default.aspx"
                Text="Board Reports">
                <Items>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="/BoardReports/Manage_BoardPackets.aspx"
                        Text="Board Reporting Management" Visible="false">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="/" CssClass="itemSeparator" Enabled="false" />

            <telerik:RadMenuItem runat="server" NavigateUrl="~/cuDataAnalysis/default.aspx"
                Text="CU Data Bank" ForeColor="White" Font-Names="Arial">
                <Items>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/cuDataAnalysis/cuDSInd.aspx"
                        Text="Individual CU Search">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Custom CU Search" NavigateUrl="~/cuDataAnalysis/CUCustomSearch.aspx">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="/" CssClass="itemSeparator" Enabled="false" />
        </Items>
    </telerik:RadMenu>
</div>

Note that the two items with text "/" have a CssClass set, which is used (the CSS below) to persist their color on hover. They are also disabled and like separator items cannot be clicked.

The following snippet contains the styles that would allow to achieve the following appearance:

html .RadMenu_Default .rmRootGroup {
    background-color: #453738;
    background-image: none;
}

html .RadMenu .rmHorizontal .rmItem .rmLink {
    background-image: none;
}

html .RadMenu .rmHorizontal .rmItem .rmLink:hover .rmText,
html .RadMenu .rmHorizontal .rmItem .rmLink.rmSelected .rmText {
    color: #000;
}

html .RadMenu .rmHorizontal .rmItem .rmLink .rmText {
    color: #fff;
}

.itemSeparator .rmText {
    color: #fff;
}

html .RadMenu .rmHorizontal .rmItem .rmLink.itemSeparator:hover .rmText,
html .RadMenu .rmHorizontal .rmItem .rmLink.itemSeparator:focus .rmText {
   color: #fff;
}

Regards,
Ivan Danchev
Telerik

[Kurt Kluth]

Thank you Ivan, that is exactly what I needed. 

[Ivan Danchev]

Hello Kurt,

I am glad we were able to assist you in achieving the desired Menu appearance.

Regards,
Ivan Danchev
Telerik