How to make plain and simple horizontal menu?

3 posts, 0 answers
  1. Micha
    Micha avatar
    2 posts
    Member since:
    May 2013

    Posted 29 May 2013 Link to this post

    Hello experts,

    I am trying to create a super simple horizontal menu, something like: Home | About | Contact
    I don't need sub menus or all the advanced stuff of the RadMenu. However, I need to be able to style it exactly like the website, hence can't use any of the Telerik skins.

    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" EnableEmbeddedSkins="False" Skin="">
        <telerik:RadMenuItem Text="Home" ></telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="|" IsSeparator="True" />
        <telerik:RadMenuItem Text="About" ></telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="|" IsSeparator="True" />
        <telerik:RadMenuItem Text="Contact" ></telerik:RadMenuItem>

    I tried the tutorial to create a custom skin:

    but I can't manage to skin it as I want. There are zillions of css classes, some are not  even exposed and built-in within the Telerik control.

    The resulting html of the RadMenu control is some super simple <ul><il>, exactly what I want. But it is rendered useless because I can't control its styling.

    Can the RadMenu control be configured so all its embedded css classes are removed?
    May be is there another control a better choice to do such a simple menu?

    thank you for your help.
  2. Kate
    Kate avatar
    1898 posts

    Posted 30 May 2013 Link to this post

    Hello Micha,

    In order to disable the styles that are applied with any of the predefined Telerik skins you can use the EnableEmbeddedSkins property and set it to false. Here is also a very good help article describing how to customize the appearance of the RadMenu control - Tutorial: Creating A Custom Skin Using Sprite

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Micha
    Micha avatar
    2 posts
    Member since:
    May 2013

    Posted 31 May 2013 Link to this post

    Hello Kate,

    Thank you for your response.

    My main problem was not to customize the color but rather controlling the padding, width, height, text-decoration properties of the menu items. After a lot of searching and trying, I managed to find the right css classes.
    As it might help other people, here is the final menu:

    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" EnableEmbeddedSkins="False" Skin="MenuTop">
        <telerik:RadMenuItem Text="Home" CssClass="menuTopItem" NavigateUrl="qq.aspx" ></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="|" CssClass="menuTopSeparator" />
        <telerik:RadMenuItem Text="About" CssClass="menuTopItem" NavigateUrl="qq.aspx" ></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="|" CssClass="menuTopSeparator" />
        <telerik:RadMenuItem Text="Contact" CssClass="menuTopItem" NavigateUrl="qq.aspx" ></telerik:RadMenuItem>

    I created a skin for this menu that I called "MenuTop" and that consists in a few CSS classes:

    .RadMenu_MenuTop .rmHorizontal .rmLink {
        padding: 0 5px 0 5px;
    .RadMenu_MenuTop .rmHorizontal .rmLink .rmText {
        padding: 0;
    .menuTopSeparator {
        color: white;
        text-decoration: none;
    .menuTopItem:hover .rmText {
        text-decoration: underline;

    Since the separators would stubbornly not show up when having the attribute "IsSeparator" set to true, I treated them like regular menu items without link and with a different Css class.

    Although I managed to get the menu as exactly as I wanted, the time consumed on such a basic control scared me. Since I have several other similar menus in the site, I might go with the basic webcontrol menu included in .net.
    I'll use Telerik for when more advanced functionalities  are required.

    Thanks again for you help.

Back to Top