How to force Asp.net Menu to rendered as UL instead of TABLE

CSS Friendly Adapter

If you are a web designer or heard about Asp.net Menu, you heard about rendering of this control more. Unfortunately this control rendered as html table tag so it generate large and un-standard code. In this article we take a look at a solution to change rendering of this control to standard html ul tag.

—————————————————————-

GNU Logo

‪Title : How to force Asp.net Menu to rendered as UL instead of TABLE

‪Publish Date : 18/04/2010

‪Version : 1.0

‪Author : Nasser Hadjloo

‪Author Mail : n.hajloo@gmail.com

‪Copyright (c) 2010 Nasser Hadjloo.

‪Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation;

‪with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled “GNU Free Documentation License”.

—————————————————————-

As you know every server-side controls rendered as html and interpret by client browser (e.g. IE, FireFox, Opera, etc) for example every ASP TextBox rendered as html input tag and etc. in some cases this rendering implemented by standards and is some of them we are facing with un-standard rendering.

CSS friendly control adapters for ASP.NET 2.0. “A control adapter can “teach” the Menu how to produce this kind of CSS friendly HTML without sacrificing the power and flexibility of the original Menu control.” Official site said. The good news about CSS Friendly isthat this adaptor is free and open source And you can fiond it on codeplex

There is an example on official CSS friendly control adapters for ASP.NET 2.0 website which display two Asp.net menus, one with CSS Friendly adapter and one Standard Asp.net Menu. MenuItems for both are same but rendered html is totally different. In a quick look you can find that Standard Menu rendered 451 lines of html code [which rendered as table] and CSS Friendly Menu which rendered 269 lines of html code [which rendered as ul].

This decreases your lines of code, and will reduce page size and on the other hand will rendered standard html tag which let your menu display in a same type in different browser.

Fortunately we passed from Asp.net 2.0 and now Asp.net 4.0 render MenuItems as standard html ul tag, so you don’t need this adapter any more, but if you are still using Asp.net 2.0 Menu, don’t miss this good adapter.

Fortunately you can use this adapter for TreeView, DetailsView, FormView, GridView, DataList and MembershipControls [Login – ChangePassword – PasswordRecovery – CreateUser – LoginStatus]

There are good tutorials on official CSS friendly control adapters for ASP.NET 2.0 website, so read those and I just give you a download link, to download CSS Adapter from codeplex.

Download CSS friendly control adapters for ASP.NET 2.0