Massoud Mazar

After realizing that asp.net menu is generating a huge HTML and causes the application pages to be large and slow, I decided to use CSS friendly control adapters. It reduced the page size by 50 KB, but I had some challenges to get it to show the way I wanted it. Here I want to share some of the things I learned along the way:

Get the latest source code and build the DLL yourself. The DLL download provided on CodePlex site is very old. Use the sample code included in the source code. There is a Web\WalkThru folder which contains page and CSS samples. Tune the menu appearance using the CSS file.

Use Conditional Comments to define CSS overwrites for IE6:

While other browsers were displaying my menu correctly, IE6 was not showing anything. Finally I noticed that IE6 requires "width" for some of the styles, but those "width" values would mess up the menu in other browsers. I ended up using following conditional comment in head section of my master page:

     <!--[if lte IE 6]>
    <style type="text/css">
        .PrettyMenu ul.AspNet-Menu {width: 100%;}
        .PrettyMenu ul.AspNet-Menu ul li {width: 10em;}
        .PrettyMenu li {width: 1em;}
    </style>
    <![endif]-->

Also, it took me a while to figure out why Chrome does not convert the normal menu to CSS friendly. After some digging, I noticed I had included a workaround in my code to fix a problem displaying the normal asp.net menu in Chrome. I removed that code and Chrome started to use the CSS friendly adapters. Here is the piece of code I had to remove:

// Fix for Google Chrome
if (!Page.IsPostBack && Request.UserAgent.IndexOf("AppleWebKit") > 0)
    Request.Browser.Adapters.Clear();