Multi-styled navigation

[John]

Hi

How can we have navigation like on the left on this page http://www.gordonramsay.com/thesavoygrill/theatre/Pre_theatre where navigation items have different attributes even when they are not selected or hovered over?

Thanks

Regards

[Kate]

Hello John,

To achieve this look you can either use the RadMenu control or the RadTabStrip control and apply the CssClass property along with the right css class selectors (you can refer to the css classes that are applied to the RadMenu here and the RadTabstrip here) in order to alter the appearance of every menu item or tab depending on the control that you are using. For example, using the Menu you could change the text color of an item using the following css class:

<style type="text/css">
        .new1, .new1 a.rmLink
        {
            color: red !important;
        }
    </style>

markup:

<telerik:RadMenu runat="server" ID="Menu1">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root 1" CssClass="new1">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root 2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root 3">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root 4">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

Greetings,
Kate
the Telerik team