Using CSS for ASP.NET menu

[collegian]

Hello All,

I am trying to apply CSS to the ASP.NET menu.I have a horizontal menu with each heading having menu items within it.I want to display the selected menu heading and all the menu items within it with a different color.I am not sure how does the selected item change when using menu in ASP.NET? Is it possible to do this in ASP.NET? I tried to use Sitemap but I can't seem to specify more than sitemap node!

Here is my code:-

<asp:Menu ID="NavigationMenu" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="3" IncludeStyleBlock="false" CssClass="menu" EnableViewState="false" Orientation="Horizontal">
<Items>
<asp:MenuItem Selected="true" Enabled="true" NavigateUrl="~/MenuPage.aspx" Text="Home">
<asp:MenuItem NavigateUrl="

http://www.google.com"

Text="google"></asp:MenuItem>
<asp:MenuItem NavigateUrl="

http://www.yahoo.com"

Text="yahoo"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/MenuPage.aspx" Text="About">
<asp:MenuItem NavigateUrl="

http://www.bing.com"

Text="bing"></asp:MenuItem>
<asp:MenuItem NavigateUrl="

http://www.msn.com"

Text="msn"></asp:MenuItem>
<asp:MenuItem NavigateUrl="

http://www.cnn.com"

Text="cnn"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>


Please give some suggestions.

 

[jmeckley]

the asp.net menu is rendered in tables by default and is a PITA to style especially with css. If you are using the CSS Friendly Adapters rendering the menu and using CSS is much simpler.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

Thanks for the reply.I'll check out the CSS Friendly Adapters!

 

[Rhys666]

You can style an asp.Net menu quite successfully but it takes some mucking around to understand the Static and Dynamic styles. i.e.,
The Menu...

<asp:Menu ID="menuMyMenu" runat="server" CssClass="dotnetMenu" DataSourceID="mapMySiteMap" DisappearAfter="1000" MaximumDynamicDisplayLevels="1" Orientation="Horizontal" StaticDisplayLevels="2" StaticEnableDefaultPopOutImage="false" StaticPopOutImageTextFormatString="" StaticSubMenuIndent="">
	<StaticMenuItemStyle CssClass="staticItem" />
	<StaticHoverStyle CssClass="staticHover" />
	<DynamicMenuStyle CssClass="popupMenu" />
	<DynamicMenuItemStyle CssClass="popupItem" />
	<DynamicHoverStyle CssClass="popupHover" />
</asp:Menu>
<asp:SiteMapDataSource ID="mapMySiteMap" runat="server" />

The CSS...

.dotnetMenu A, .dotnetMenu A:visited
{
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 10pt;
	cursor: default;
}
.staticItem A, .staticItem A:Visited
{
	color: #ffffff;
	cursor: default!important;
	font-size: 10pt;
}
.staticItem TD
{
	padding: 5px;
	border-right: transparent 1px solid;
	border-top: transparent 1px solid;
	border-left: transparent 1px solid;
	border-bottom: transparent 1px solid;
	color: #ffffff;
	cursor: default;
	text-align: center;
	font-size: 10pt;
}
.staticHover TD
{
	background-color: #cdd7e3;
	border-right: #ffffff 1px solid;
	border-top: #000000 1px solid;
	border-left: #000000 1px solid;
	border-bottom: #ffffff 1px solid;
	background-image: none;
	color: #08246B;
	cursor: default;
	text-align: center;
	font-size: 10pt;
}
.staticHover A, .staticHover A:Visited
{
	color: #08246B;
	cursor: pointer;
	font-size: 10pt;
}
.popupMenu TD
{
	text-align: left;
	background-color: #cdd7e3;
	font-size: 10pt;
	cursor: default;
}
.popupItem A, .popupItem A:Visited
{
	color: #08246B;
	cursor: pointer;
	font-size: 10pt;
	cursor: default;
}
.popupItem TD
{
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	padding-top: 5px;
	font-size: 10pt;
	cursor: default;
}
.popupHover A, .popupHover A:Visited
{
	color: #ffffff;
	cursor: pointer;
	font-size: 10pt;
}
.popupHover TD
{
	background-color: #08246B;
	border-right: #ffffff 0px solid;
	border-top: #ffffff 0px solid;
	border-left: #ffffff 0px solid;
	border-bottom: #ffffff 0px solid;
	background-image: none;
	font-size: 10pt;
	cursor: default;
}

Rhys

"The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it"
Terry Pratchett

 

[jmeckley]

Rhys, that's why I recommended the adapter. it produces clean html which can easily be styled using common techniques, rather than decrypting the mess MS created.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[Rhys666]

Jason, I understand that but just thought it might be useful to give a working example of a styled asp.net menu to help collegian understand said, (and agreed), MS mess

Rhys

"The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it"
Terry Pratchett