Semantic mark-up for menus

In SharePoint 2007, if you were building a tightly designed website, chances are that you were faced with a problem when using the out of the box (or ASP.NET) menu controls. Before ScottGu’s team were converted into believing that standards compliance was a good thing, the ASP.NET 2.0 controls came up woefully short when it came to clean mark up, relying on nested tables to get the layout right.   

SharePoint 2007 continued this theme, wrapping their Microsoft.SharePoint.WebControls.AspMenu control with more tables, and worse, marking it so that you couldn’t inherit from the control to solve the rendering issue. Thankfully, there was a work around using control adapters to delegate the Render() method.   

But it was still a pain. The configuration files for your control adapter have to live in the file system, in the App_Browsers directory, which means that a WSP cannot deploy them to your farm. And they sometimes introduce performance penalties in high scale sites. And in the case of menu controls, there was business logic wrapped into the original Render() method which was hard to reproduce, since it called internal methods.   

How has the story improved in 2010? ASP.NET 4.0 does solve that problem, but SharePoint 2010 will not be shipping with support for ASP.NET 4.0 – that will have to wait for a service pack. But all is not lost: the SharePoint product team has made a significant investment in standards compliance and providing better quality mark-up. An example is the new UseSimpleRendering property on the AspMenu control. This Boolean flag is now all you need to set if you want navigation list to be rendered using <li> tags.    

So let’s check what output we get with that property set.  With UseSimpleRendering=”false”, the output is the traditional output that 2007 had, with nested tables and inline styles, both frowned on by the web designer community. 

<table id="zz1_TopNavigationMenuV4" class="menu zz1_TopNavigationMenuV4_2" 
cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" 
    onkeyup="Menu_Key(this)" id="zz1_TopNavigationMenuV4n0">
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="zz1_TopNavigationMenuV4_1" href="/" accesskey="1">Home</a>
          </td>
       </tr>
     </table>
   </td>
   <td style="width:3px;"></td>
   <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" 
   onkeyup="Menu_Key(this)" id="zz1_TopNavigationMenuV4n1">
     <table cellpadding="0" cellspacing="0" border="0" width="100%">
       <tr>
         <td style="white-space:nowrap;">
           <a class="zz1_TopNavigationMenuV4_1" href="/about-us/Pages/default.aspx">About us</a>
         </td>
       </tr>
     </table>
   </td>
   <td style="width:3px;"></td>
 </tr>
</table> 

With  UseSimpleRendering=”true”, the output is now much cleaner: 

   
<div id="zz15_TopNavigationMenuV4" class="menu">
  <div class="menu horizontal menu-horizontal">
    <ul class="root static">
      <li class="static">
        <a class="static menu-item" href="/" accesskey="1">
          <span class="additional-background">
            <span class="menu-item-text">Home</span>
          </span>
        </a>
      </li>
      <li class="static selected">
        <a class="static selected menu-item" href="/about-us/Pages/default.aspx">
          <span class="additional-background">
            <span class="menu-item-text">About us</span>
            <span class="ms-hidden">Currently selected</span>
          </span>
        </a>
      </li>
    </ul>
  </div>
</div>

 Note the lack of tables, the fact that there are no inline styles, and that accessibility has clearly been taken care of with the inclusion of specific textual clues that a particular item is selected.

Rock on!

Advertisements
Leave a comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: