On a recent project, I had the task—nay, the privilege—of branding a SharePoint 2010 publishing site. The site design called for a line of description to appear beneath each item on the menu. While the description field available in SharePoint’s Navigation Settings is rendered, by default, as a handy tooltip on each menu link, there was no evident configuration in which the description could be written to the screen as per my requirements.
The upside of this situation was that I was taken most of the way to my goal by this default behavior; the entered description was present in the page markup.
<li class="static"> <a class="static menu-item" title="This is the first menu item." href="/Pages/article1.aspx"> <span class="additional-background"> <span class="menu-item-text">Menu Item 1</span> </span> </a> </li>
And, I have jQuery.
So, naturally, I added the following snippet to my site’s master page:
Of course, those of you fluent in Mr. Resig‘s distinct style of script-fu will see that this extracts our description string from the link element and builds it out into a paragraph, which is then appended to the link:
<li class="static"> <a class="static menu-item" title="This is the first menu item." href="/Pages/article1.aspx"> <span class="additional-background"> <span class="menu-item-text">Menu Item 1</span> </span> </a> <p class="menu-item-description">This is the first menu item.</p> </li>
Rendering the desired result on the menu, without using a line of server-side code.1 comment