Radmenu and Separator

4 posts, 1 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 28 Mar Link to this post

    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="/" />
  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 31 Mar Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 31 Mar in reply to Ivan Danchev Link to this post

    Thank you Ivan, that is exactly what I needed. 
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 04 Apr Link to this post

    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.
Back to Top