How to force Menu to rendered as UL instead of TABLE

CSS Friendly Adapter

CSS Friendly Adapter

If you are a web designer or heard about 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

GNU Logo

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

‪Publish Date : 18/04/2010

‪Version : 1.0

‪Author : Nasser Hadjloo

‪Author Mail :

‪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 menus, one with CSS Friendly adapter and one Standard 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 2.0 and now 4.0 render MenuItems as standard html ul tag, so you don’t need this adapter any more, but if you are still using 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

About these ads

4 Responses to How to force Menu to rendered as UL instead of TABLE

  1. Pingback: After your website is created what server application do you use to broadcast it over the web or intranet?

  2. Your blog is so informative … keep up the good work!!!!

  3. Venessa says:

    Hello. I am very pleased I found this blog, I truly discovered you by mistake, whilst I’d been searching Google for another thing, Anyway I am here now and would just like to regards for the wonderful blog posting as well as a all round intriguing web web-site (I additionally like the theme/design). I have saved it and also subscribed to the RSS feeds. With regards, Venessa.

  4. Hi there, I found your web site by the use of Google whilst looking
    for a comparable topic, your website got here up, it looks great.
    I’ve bookmarked it in my google bookmarks.
    Hi there, just become aware of your blog via Google, and located that it’s really informative.
    I’m going to watch out for brussels. I’ll be grateful in case
    you proceed this in future. Numerous people might be
    benefited out of your writing. Cheers!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: