Home > ASP.Net, CSS > Tab Menu

Tab Menu


Hi
try this example :-

<div id="topNav">
    <asp:SiteMapDataSource ID="topMenuData" runat="server" ShowStartingNode="false" />
    <asp:Menu ID="topMenu" runat="server" DataSourceID="topMenuData"
        MaximumDynamicDisplayLevels="0" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
        <StaticSelectedStyle CssClass="staticSelectedStyle" />
        <StaticHoverStyle CssClass="staticHoverStyle" />
    </asp:Menu>
</div>

The first just displays the top line; notice that it has MaximumDynamicDisplayLevels set to 0, meaning that only a single level of static items is show. ShowStatingNode is set to false so that the single root node doesn’t show either.

The sub-menu is another Menu control:

<div id="subNav">
    <asp:SiteMapDataSource ID="subMenuData" runat="server"
        ShowStartingNode="false" StartFromCurrentNode="true" />
    <asp:Menu ID="subMenu" runat="server" DataSourceID="subMenuData"
        Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="substaticMenuItemStyle" />
        <StaticHoverStyle CssClass="substaticHoverStyle" />
    </asp:Menu>
</div>

This uses a separate SiteMapDataSource, but with the default configuration this comes from the same site map file as the first SiteMapDataSource. The key properties are StartfromCurrentNode, which is set to true to make this second menu start from the current page; ShowStartingNode is set to false so that the current node isn’t show, resulting in the child nodes being shown. So you select an item from the top menu and its children are shown in the bottom.

Now you can add some styling and you get very close to the MSDN style:

<style type="text/css">
    #topNav
    {
        width: 100%;
        background-color: #964240;
        vertical-align: bottom;
        padding: 0;
        margin: 0;
        z-index: 0;
    }
    #subNav
    {
        width: 100%;
        border-left: solid 1px #000;
        border-bottom: solid 1px #000;
        border-right: solid 1px #000;
        padding: 0;
        margin: 0;
        height: 24px;
        background-color: #eee;
    }
    .staticMenuItemStyle
    {
        width: 89px;
        background-color: #7A1312;
        border: solid 1px #000;
        color: #fff;
        text-align: center;
    }
    .staticSelectedStyle
    {
        background-color: #eee;
        color: #000;
        border-bottom: solid 1px #eee;
        z-index: 100;
    }
    .staticHoverStyle
    {
        background-color: #902423;
    }

    .substaticMenuItemStyle
    {
        width: 89px;
        background-color: #eee;
        text-align: center;
    }
    .substaticHoverStyle
    {
        background-color: #D0D0D0;
        border: solid 1px #A68F8F;
    }
</style>

It’s not quite the same, but close. You could get closer with background images, to give the menu items a more rounded look, as well as using the CSS Adapters to produce cleaner HTML, but like this you get a good looking tab-style menu very simply.

Check

http://blogs.ipona.com/davids/archive/2008/08/19/tab-style-menus.aspx

Good Luck

Advertisements
Categories: ASP.Net, CSS
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: