How to make plain and simple horizontal menu?

[Micha]

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="">
  <Items>
    <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>
  </Items>
</telerik:RadMenu>

I tried the tutorial to create a custom skin:

http://www.telerik.com/help/aspnet-ajax/menu-appearance-creating-custom-skins.html

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.

[Kate]

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

Regards,
Kate
Telerik

[Micha]

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">
  <Items>
    <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>
  </Items>
</telerik:RadMenu>

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;

} 

.menuTopItem,

.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.

Micha