Click here to Skip to main content
Click here to Skip to main content
Technical Blog

CSS Friendly Menu Control in ASP.NET 4.0

, 18 May 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
CSS Friendly Menu Control in ASP.NET 4.0

It is much easier to apply CSS when we have ul,li elements as the HTML content. If we look into ASP.NET Menu Control till Version 3.5, it is rendered as Table-TR-TD Tag. Though Table/Tr/Td is quite useful to display tabular data, it sometimes creates a big problem when we need to do more work with CSS. To overcome this problem, we generally used CSS Friendly adapter to render the ASP.NET Control in ul/li mode.

ASP.NET 4.0 makes things easier for web developers by providing “RenderingMode” properties. Here we can specify RenderMode of a ASP.NET Menu control which define what will be the HTML Render Content Type. By default, the mode is “List” which means control will be render as ul/li.

As per the above diagram, we can see that there are three modes available. We can use any one of them as per the requirement.

Let’s see one small example by using the ASP.NET menu web control and check how it renders as HTML in ASP.NET 4.0. Assume that we are having the following piece of code:

 <asp:Menu runat="server" ID="customeMenu" RenderingMode="List" >
            <Items>
                <asp:MenuItem Text="File" Value="File"></asp:MenuItem>
                <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
                <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
                <asp:MenuItem Text="WebSite" Value="WebSite"></asp:MenuItem>
            </Items>
        </asp:Menu>

This Menu control will be rendered as below HTML code in ASP.NET 4.0 as, we have mentioned “List” as the rendering mode.

<ul>
		<li><a  href="#">File</a></li>
		<li><a  href="#">Edit</a></li>
		<li><a  href="#">View</a></li>
		<li><a  href="#">WebSite</a></li>
	</ul>

To test the above scenario, run the web application that contains the menu control and after page rendered is complete, Right Click on view source of the aspx page. The output will appear as below:

We can also generate the Menu Control as HTML Table like the earlier version by using RenderingMode=”Table”.

So, for the same block of code,

 <asp:Menu runat="server" ID="customeMenu" RenderingMode="Table" >
            <Items>
                <asp:MenuItem Text="File" Value="File"></asp:MenuItem>
                <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
                <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
                <asp:MenuItem Text="WebSite" Value="WebSite"></asp:MenuItem>
            </Items>
        </asp:Menu>

HTML Rendered output will be as follows:

<table >
	<tr >
		<td><table>
			<tr>
				<td >File</a></td>
			</tr>
		</table></td>
	</tr><tr>
		<td><table >
			<tr>
				<td>Edit</a></td>
			</tr>
		</table></td>
	</tr><tr>
		<td><table >
			<tr>
				<td >View</a></td>
			</tr>
		</table></td>
	</tr><tr >
		<td><table >
			<tr>
				<td>WebSite</a></td>
			</tr>
		</table></td>
	</tr>
</table>

Note: With the above HTML content ASP.NET engine automatically adds few client side script along like onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”customeMenun0? with rendered menu items which helps the developer to handle the client side events.


kick it on DotNetKicks.com

Shout it


Filed under: .NET 4.0, ASP.NET, ASP.NET 4.0, Visual Studio 2010

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhijit Jana
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband
 
Blog : http://abhijitjana.net
Web Site : http://dailydotnettips.com
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide
Follow on   Twitter

Comments and Discussions

 
QuestionMouseover Tabs Menu PinmemberMS Babu10-May-13 20:59 
GeneralMy vote of 1 PinmemberMarcelo Lujan [El Bebe.Net ]28-Feb-12 12:10 
QuestionConverting existing CssFriendly menus Pinmembersyoungstephen14-Oct-11 4:31 
GeneralMy vote of 5 PinmentorKunalChowdhury6-Sep-10 9:15 
GeneralMy vote of 1 PinmemberAndrey Mazoulnitsyn24-May-10 20:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 18 May 2010
Article Copyright 2010 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid