Request a topic or
contact an Arke consultant
404-812-3123
Creating a Horizontal Tabbed Menu with the Menu Control

Arke Systems Blog

Useful technical and business information straight from Arke.

About the author

Author Name is someone.
E-mail me Send mail

Recent comments

Archive

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2024

Creating a Horizontal Tabbed Menu with the Menu Control

I needed to create a quick horizontal tabbed menu with the Menu control.  The tabs have rounded corners so we're using image backgrounds.  We also have different images for the selected tab and when you hover.

image

<asp:Menu runat="server" ID="Menu1" SkinID="MenuHorizontalTabs">
    <Items>
        <asp:MenuItem Text="Tab 1" Value="Tab1" Selected="true" />
        <asp:MenuItem Text="Tab 2" Value="Tab2" />
        <asp:MenuItem Text="Tab 3" Value="Tab3" />
        <asp:MenuItem Text="Tab 4" Value="Tab4" />
    </Items>
</asp:Menu>

Then I added MenuHorizontalTabs to my skins file. 

<asp:Menu runat="server" SkinID="MenuHorizontalTabs" Orientation="Horizontal">
    <StaticItemTemplate>
        <div>
            <span>
                <asp:Literal runat="server" ID="Literal1" Text='<%# Eval("Text") %>' />
            </span>
        </div>
    </StaticItemTemplate>
    <StaticSelectedStyle CssClass="MenuHorizontalTabsSelectedMenuItem" />
    <StaticHoverStyle CssClass="MenuHorizontalTabsHoverMenuItem" />
    <StaticMenuItemStyle CssClass="MenuHorizontalTabsMenuItem" />
</asp:Menu>

Now, let's look at the CSS file.

.MenuHorizontalTabsMenuItem * div
{
    background:url(/images/header/left_both.gif) no-repeat left top; 
    height: 22px; 
    padding-left: 9px; 
    cursor: pointer;
}
.MenuHorizontalTabsMenuItem * span
{
    background:url(/images/header/right_both.gif) no-repeat right top; 
    padding: 5px 15px 4px 6px; 
    font-size: 10px; 
    color: #333; 
    height: 22px;
}
.MenuHorizontalTabsSelectedMenuItem * div
{
    background-position: 0px -150px;
}
.MenuHorizontalTabsSelectedMenuItem * span
{
    background-position: 0px -150px;
}
.MenuHorizontalTabsHoverMenuItem * div
{
    background-position: 0px -150px;
    color: Blue;
    text-decoration: none;
}
.MenuHorizontalTabsHoverMenuItem * span
{
    background-position: 0px -150px;
    color: Blue;
    text-decoration: none;
}

And finally, let's see the images.

left_both

left_both.gif

right_both

right_both.gif


Categories: ASP.NET
Posted by eric stoll on Thursday, January 31, 2008 10:07 AM
Permalink | Comments (0) | Post RSSRSS comment feed