Creating a Drop Down Navigation Menu in SharePoint Using JavaScript

Slalom Consulting—Dennis Jackson

Dennis Jackson is a Slalom Consultant and Architect in our Dallas Portals & Collaboration Practice. He has over 15 years’ experience using databases and the web creating corporate intranets, call center applications, content management platforms, e-commerce, and self-service sites for Fortune 500 clients.

The Case
The built in navigation for SharePoint in general can take some getting used to. In 2010 it is much better, but there are some occasions where a client may want something that is different than the way that SharePoint wants to do it. In this case the client was asking for a drop down menu where a user could pick from “any of the team team sites” and “just go there”.

And if you were in a team site, then list the other ones.

But we have a preference in our practice for using out-of-the-box SharePoint first, and avoiding customizations if possible. So the approach that we ended up going with was client side JavaScript (JS) using the content editor web part to host the script.

The Plan
There are a few main parts of the JS that needed to be ironed out.

  • First, communicating with SharePoint to get a list of all the webs that were under this site.
  • Second, iterating over the results and appending them to a select drop down box with the needed data and labels.
  • Third, recognizing the dropdown changes and routing the user appropriately. Read more of this post

Get every new post delivered to your Inbox.

Join 130 other followers

%d bloggers like this: