SP2010 Branding Tip #7 – Using Simple Rendering in SharePoint Navigation

One of the really cool enhancements in SharePoint 2010 is the addition of the UseSimpleRendering property to the <SharePoint:AspMenu> control. When UseSimpleRendering is set to True, the SharePoint navigation menu is rendered using a cleaner unordered HTML list. Here is a sample of what the new HTML looks like when you view source:

<li class="static dynamic-children">
  <a class="static dynamic-children menu-item"
  href="http://www.google.com">
    <span class="additional-background">
      <span class="menu-item-text">Heading</span>
    </span>
  </a>
  <ul class="dynamic">
    <li class="dynamic">
      <a class="dynamic menu-item" href="/">
        <span class="additional-background">
          <span class="menu-item-text">Item</span>
        </span>
      </a>
    </li>
  </ul>
</li>

As you can see this is much cleaner than the old Table structures that were used in SharePoint 2007. When I set out to style this new HTML it took me a bit to parse through the out of the box CSS to determine the best way to tackle it. Here is a commented version of the CSS classes that I used to style the new simple rendered top navigation:

/* item style */
.s4-tn li.static > .menu-item {
}

/* item style hover */
.s4-tn li.static > a:hover {
}

/* flyout holder */
.s4-tn ul.dynamic {
}

/* flyout item */
.s4-tn li.dynamic > .menu-item {
}

/* flyout item hover */
.s4-tn li.dynamic > a:hover {
}

For the most part you can take your old styles from the SharePoint 2007 navigation and apply them here (with some modification to account for cleaner HTML).

What if you want to hide the little arrows that appear next the navigation items that have flyouts (dynamic display levels)? Here is the CSS I used to hide them:

/* hide arrows for top level items with flyouts */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children span.additional-background{
    padding-right:0px;
    background-image:none;
}

After some trial and error I was able to duplicate the current SharePoint 2007 top navigation for SharePoint911 using the Simple Rendering:

 

 

One last note, if all of this new cleaner HTML scares you and you don’t want to spend the time to convert your old CSS to work with the new Simple Rendering, you can always turn it off by setting UseSimpleRendering=”False” in the <SharePoint:AspMenu> control. With this set to false, the old less clean Table based navigation is used and all of your old CSS styles should work perfectly in SharePoint 2010.