Display Menu Descriptions on a Publishing Site Without Custom Navigation

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.

Here’s The Important Part

So, naturally, I added the following snippet to my site’s master page:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {            

        // show menu item descriptions            
        $(".menu-item").each(function () {             

            // retrieve the description from the 'title' attribute            
            var desc = $(this).attr("title");

            // add a paragraph tag after the menu item            
            $(this).after("<p class='menu-item-description'>" + desc + "</p>");

        });
    });
</script>

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

1. llc says:

   December 31, 2010 at 7:38 am

   Wow this is a great resource.. I’m enjoying it.. good article

   Reply