This is a migrated thread and some comments may be shown as answers.

Radmenu and Separator

3 Answers 198 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kurt Kluth
Top achievements
Rank 1
Kurt Kluth asked on 28 Mar 2016, 04:04 PM

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="/" />

3 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 31 Mar 2016, 11:42 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Kurt Kluth
Top achievements
Rank 1
answered on 31 Mar 2016, 12:47 PM
Thank you Ivan, that is exactly what I needed. 
0
Ivan Danchev
Telerik team
answered on 04 Apr 2016, 02:31 PM
Hello Kurt,

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

Regards,
Ivan Danchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Menu
Asked by
Kurt Kluth
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Kurt Kluth
Top achievements
Rank 1
Share this question
or