ARTICLE

How to change the selected color of the menu item in ASP. NET using VB.NET

Posted by Rohatash Kumar in Articles | ASP.NET using VB.NET on June 29, 2011

Tags: vb.net, vb.net article, vb.net tutorials, vb.net menu item in ASP. NET, menu in asp.net

Here, we will see how to change the selected color of the menu item.

Tweet
1607
0

Download Files:

MenuDemo.zip

Reader Level: Beginner

Here, we will see how to change the selected color of the menu item. When we Select any menu item that should be highlight like the text becomes bold and change background color.

Now add 1 Master Page and its Content Pages. Select the Master Pages to Content Pages.

1. Home.aspx
2. TrainingPage.aspx
3. JobPage.aspx
4. ArticlePage.aspx
5. MasterPage.master

In the Master Page, add the following HTML.

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

type="text/css" />

</head>

<body >

<div>

<asp:Menu ID="topMenu" runat="server" DataSourceID="topMenuData"

MaximumDynamicDisplayLevels="0" Orientation="Horizontal">

</asp:Menu>

</div>

<br />

</div>

<div >

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

<asp:SiteMapDataSource ID="topMenuData" runat="server" ShowStartingNode="false" />

</form>

</body>

</html>

In the above HTML code we drag a sitemap control and set the property howStartingNode="false".

Now we create CSS.

MenuItemStyle - MenuItemStyle is the Style of the item which is not selected.
SelectedStyle - SelectedStyle is the Style of the item which is selected.
HoverStyle - HoverStyle is the hover Style of the item.

CSS code

#topNavigation

{

width: 100%;

background-color:red;

vertical-align: bottom;

padding: 0;

margin: 0;

z-index: 0;

height: 30px;

}

.MenuItemStyle