Navigation menu using RadTabStrip

[kdyeqb]

Hello.

I would like to get the child tabs below the parent tab and it should open only when the parent is clicked. Now , if any other parent tab is clicked , then earlier one should collapse and this parent tab should get open with its child tabs. I tried using ChildGroupCSSClass but it was not working. Moreover, also I would like to change the color, size of tab strip.

Please let me know how can I place the child tab below the parent one and apply the CSS.....

[Ivan Danchev]

Hello Ankit,

The default behavior of the TabStrip with tabs that contain child tabs is as you describe it: the child tabs are displayed below the parent tab and clicking on another parent shows its children. Here's an example:

<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">
    <Tabs>
        <telerik:RadTab Text="Examples">
            <Tabs>
                <telerik:RadTab Text="Example1"></telerik:RadTab>
                <telerik:RadTab Text="Example2"></telerik:RadTab>
                <telerik:RadTab Text="Example2"></telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab Text="Configurators">
            <Tabs>
                <telerik:RadTab Text="Configurator1"></telerik:RadTab>
                <telerik:RadTab Text="Configurator2"></telerik:RadTab>
                <telerik:RadTab Text="Configurator3"></telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab Text="Tests">
            <Tabs>
                <telerik:RadTab Text="Test1"></telerik:RadTab>
                <telerik:RadTab Text="Test2"></telerik:RadTab>
                <telerik:RadTab Text="Test3"></telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

As for changing the size and the color of the tabs here are two CSS rules, which demonstrate how you can increase the size of the tabs as set their background-color:
​

<style>
    .rtsLI {
        width: 120px;
        height: 50px;
        background-color: lightblue;
    }

    html .RadTabStrip .rtsLevel .rtsSelected .rtsLink {
        background-color: lightgreen;
    }
</style>

Regards,
Ivan Danchev
Telerik