First experience with CSS friendly control adapters beta

I had the chance to realize that CSS friendly control adapters beta from the ASP.NET Team was online for a short time and downloaded it, so I had the pleasure to experience it a bit this evening.

By the way I recommend the reading of the White Paper, that is well written.

So my first idea was to integrate the Menu on Tech Head Brothers. IMHO this new menu is far better than the one delivered with ASP.NET because it uses a pure CSS approach.

After copying the set of needed files to my project, I was able to start changing all the CSS to meet my needs. I did not faced any real issue to change the whole thing, but then I realized that I missed the possibility to know the selected item of my menu. I started to look at the code and in 2 minutes it was changed. Nice.

So I render this:

<div class="THBMenu">  
 <div class="AspNet-Menu-Horizontal">  
  <ul class="AspNet-Menu">  
   <li class="AspNet-Menu-Leaf">  
    <a href="/Website/Default.aspx" class="AspNet-Menu-Link">  
     Accueil  
    </a>  
   </li>  
   <li class="AspNet-Menu-Leaf">  
    <a href="/Website/Articles.aspx" class="AspNet-Menu-Link">  
     Articles  
    </a>  
   </li>  
   <li class="AspNet-Menu-Leaf">  
    <a href="/Website/Astuces.aspx" class="**AspNet-Menu-Link-Selected**">  
     Astuces  
    </a>  
   </li>

To achieve this I modified the method BuildItem in the file MenuAdapter.cs like this:

if (item != Control.SelectedItem)
    writer.WriteAttribute(“class”, “AspNet-Menu-Link”);
else
    writer.WriteAttribute(“class”, “AspNet-Menu-Link-Selected”);

And then I added the new thing in the CSS, MenuExample.css:

.THBMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a.AspNet-Menu-Link-Selected
{
    color: #1A2633;
    background: url(../../PersistantImage.ashx?theme=Default&file=Rounded.gif) no-repeat bottom center;
}

For such a result: