Creating Tab like menu using asp.net menu control

Hello guys,


If you want to change your page into an attractive tab like menu, you can use this css. 
You can also use image with this css.






Apply the following style for the menu control.


<style type=”text/css”>
.MenuItem
{
background-color: #7A95FF;
font-family: Microsoft Sans Serif;
font-size: 12px;
color: White;
padding: 5px 10px 5px 10px;
border-color: Black;
border-style: solid;
border-width: 1px 1px 0px 1px;
}
.MenuHover
{
background-color: #6181FF;
}
.MenuSelected
{
background-color: #476CFF;
padding: 6px 12px 5px 12px;
}

</style>



This is how to apply style for Menu control:


 <asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″ Orientation=”Horizontal” >
            <StaticMenuItemStyle CssClass=”MenuItem” />
            <StaticHoverStyle CssClass=”MenuHover” />
            <StaticSelectedStyle CssClass=”MenuSelected”/>
        </asp:Menu>

You have to use sitemap for the your application because, Selected Style wont get applied for without using site map.


You can download the entire code from the following link:
Click here to download the code..


Try it guys.. and post your valuable comments.



 

Leave a Reply

Your email address will not be published. Required fields are marked *