Radmenu and Separator

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

    Posted 28 Mar 2016 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
    1056 posts

    Posted 31 Mar 2016 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. Kurt Kluth
    Kurt Kluth avatar
    146 posts
    Member since:
    Oct 2009

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

    Thank you Ivan, that is exactly what I needed. 
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1056 posts

    Posted 04 Apr 2016 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