A Three Level jQuery Expandable Menu for SharePoint 2010

Written by Denis Stadler on . Posted in jQuery

The screenshot below shows the standard left SharePoint navigation menu redesigned with the help of jQuery as an expandable, 3 levels menu.

This menu has been tested against the v4.master master page with an activated Publishing feature in every site within the site collection.

 

You can download the full source as Visual Studio solution – Stadler.jQuerySPMenu. The solution is packaged as a site collection feature.

The project has now his own Codeplex pagejQuery Expandable Menu for SharePoint 2010.

When deployed, it uses the CSS code saved inside the Style Library document library into the Stadler.jQuerySPMenu folder. The CSS files is not minified.

Both the jQuery script and jQuery 1.8.2 minified files are automatically deployed into the /_layouts/ directory.

The script basically could be considered a monkey patch for the SharePoint menu. The source is:

$(document).ready(function () {
    setTimeout(function () {

        //add the gif and collapse all
        $('div.menu-vertical > ul > li').each(function () {
            var html = $(this).html();

            if (html.toLowerCase().search('
<ul ') != -1) {
                var htmlnew = '<a class="collapsed" href="#">    </a>';
                html = htmlnew.concat(html);
                $(this).html(html);

                $(this).find('ul > li').each(function () {
                    html = $(this).html();

                    if (html.toLowerCase().search('
<ul ') != -1) {
                        htmlnew = '<a class="collapsed" href="#">    </a>';
                        html = htmlnew.concat(html);
                        $(this).html(html);
                        $(this).find('> ul').toggle();
                    }

                });
                $(this).find('> ul').toggle();
            }
        });

        //expand the selected 1st level menu entry
		if ($('div.menu-vertical > ul > li').hasClass('selected'))
		{
			$('div.menu-vertical > ul > li.selected').find('> a.collapsed').toggleClass('collapsed').toggleClass('expanded');
			$('div.menu-vertical > ul > li > a.expanded + a + ul').slideToggle('fast');
		}

		//expand the selected 2nd level menu entry
		if ($('div.menu-vertical > ul > li > ul > li').hasClass('selected'))
		{
			//expand parent
			$('div.menu-vertical > ul > li > ul > li.selected').parent().parent().find('> a.collapsed').toggleClass('collapsed').toggleClass('expanded');
			$('div.menu-vertical > ul > li > ul > li.selected').parent().slideToggle('fast');
			//expand child
			$('div.menu-vertical > ul > li > ul > li.selected').find('> a.collapsed').toggleClass('collapsed').toggleClass('expanded');
			$('div.menu-vertical > ul > li > ul > li > a.expanded + a + ul').slideToggle('fast');
		}

		//expand the selected 3rd level menu entry
		if ($('div.menu-vertical > ul > li > ul > li > ul > li').hasClass('selected'))
		{
			//expand 1st parent
			$('div.menu-vertical > ul > li > ul > li > ul > li.selected').parent().parent().parent().parent().find('> a.collapsed').toggleClass('collapsed').toggleClass('expanded');
			$('div.menu-vertical > ul > li > ul > li > ul > li.selected').parent().parent().parent().slideToggle('fast');

			//expand 2nd parent
			$('div.menu-vertical > ul > li > ul > li > ul > li.selected').parent().parent().find('> a.collapsed').toggleClass('collapsed').toggleClass('expanded');
			$('div.menu-vertical > ul > li > ul > li > ul > li.selected').parent().slideToggle('fast');
		}

        $('div.menu-vertical').css("display", "inherit");

        //expand/collapse second level
        $('div.menu-vertical > ul > li > ul > li > a.collapsed').click(function () {
            $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
            return false;
        });

        $('div.menu-vertical > ul > li > a.expanded').click(function () {
            $('div.menu-vertical > ul > li > a.expanded').not(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('fast');
            $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('fast');
            return false;
        });

        $('div.menu-vertical > ul > li > a.collapsed').click(function () {
            $('div.menu-vertical > ul > li > a.expanded').not(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('fast');
            $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('fast');
            return false;
        });
    }, 250);
});

In order to display items on three levels you need to modify v4.master file, more precise the StaticDisplayLevels property of the left navigation menu by setting the value to 3.

<SharePoint:UIVersionedContent UIVersion="4" runat="server">
<ContentTemplate>
<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Vertical" StaticDisplayLevels="3" MaximumDynamicDisplayLevels="0" SkipLinkText="" CssClass="s4-ql" />
</ContentTemplate>
</SharePoint:UIVersionedContent>

Also you should check your site navigation settings, in order to generate at least 3 level depth.

That all! Enjoy! :)

Tags: , , , , ,

Trackback from your site.

Denis Stadler

I'm a technology enthusiast, with more than 10 years of experience in SharePoint and Dynamics CRM projects. To find more details about, please visit the about me page.

Comments (18)

      • Alexandru Dionisie

        |

        Am zis să scriu şi eu tot în EN, dar nah. :)
        Felicitări, şi în RO.
        Ai foarte multe articole interesante, din care se pot învăţa foarte multe lucruri utile.
        Îmi place. :D

        Reply

  • nish

    |

    This sample almost woks for me. I noticed on every page load the left navigation seem to collapse. Every time I click on a link on left navigation, the navigation collapses automatically. Is this the expected behavior of the script?

    Thanks

    Reply

    • Denis Stadler

      |

      The first expandable level inside the menu should behave like a jQuery accordion (as it is in the post’s video).

      It should by default be expanded to show the current page. By default the SharePoint 2010 menu, adds the CSS class “selected” to the selected page.

      Reply

  • Nisha

    |

    Hi Denis,

    Thanks for sharing your work with us.
    This works perfect however when I click on any of the subsites, the navigation on the subsite appears expanded first and then it collapses by itself. I would like to leave it expended. Is this what its meant to do? Is it possible to leave the left nav only to what its selected as expended.

    Regards
    Nisha

    Reply

    • Denis Stadler

      |

      Hi Nisha,

      The menu should behave as it is in the post’s video. You might need to modify the CSS if want to use it against other master pages.
      If you want to change the behavior of expand / collapse you need to modify the script, from line 33 and below.

      Cheers,
      Denis

      Reply

  • Tony

    |

    Hello,

    Can you help me please ?

    I install this solution in SharePoint 2010 foundation and my problem is the dynamic menu don’t visible for user in read. Why and how to change this ?

    thanks

    Reply

    • Denis Stadler

      |

      After having changed the master page, have you published it (this is the most common cause considering that for the admin the menu is visible and for the users not)? I’m assuming that the users have only read permission on the site.

      Reply

  • Maria Vig

    |

    Do you have the same solution for SharePoint Enterprise?

    Reply

  • Maria Vig

    |

    SharePoint 2010 Enterprise

    Reply

  • Maria Vig

    |

    I’ve applied this on SharePoint Enterprise and the navigation did not perform properly and link doesn’t expand. When I tried this on SharePoint Foundation it works perfectly fine.

    Reply

  • Maria Vig

    |

    Can I apply this on custom master page? It seems like this is written for V4.master page only?

    Reply

  • Maria Vig

    |

    I am using nightandday.master. Do I need to amed the code? If so, where do I change the code?

    Reply

    • Denis Stadler

      |

      Sorry when I updated the post, the system deleted some code…. In order to see the expanding-collapsing menu you need to set StaticDisplayLevels property of the SharePoint:AspMenu object to 3.

      There might be also some CSS not displaying correctly, but that is easy to correct.

      Reply

  • Maria Vig

    |

    I have set the StaticDisplayLevels property to 3. The expanding and collapse (icons + and arrow) is not displaying.

    Reply

  • Marin

    |

    It works nice in SP2013. Thx

    Reply

Leave a comment

*