Don’t Touch the Master Page
Like most folks in SharePoint land we use jQuery in Instant Legal Practice and Instant Consulting Practice whenever we need to change what SharePoint serves. We could have used a custom master page, but one of our guiding principles is to avoid such customizations of the host environment because an app that requires modification of global resources, like master pages, will not coexist well with other apps. Therefore none of our apps touch the master page and we always attack these sorts of problems in the client with script.
Know your URL
Getting the HTML and Making it Seamless
Although we go out of our way not to customize global resources we always want it to look like we did. Normal users should not be able to tell what is custom and what is not – we want everything to be seamless and feel like a natural part of the platform. Because of this, when we need HTML we almost always derive it from the original using Firefox or Chrome. Prior to IE 11, IE’s developer tools aren’t good for this task because the DOM inspector doesn’t show dynamic content and the menus are dynamic.
To get the HTML, simply select the element and copy the HTML to the clipboard.
Getting the navigation HTML with Firebug
This technique ensures that the resulting menu will look stock and will also respond to custom themes and design packages.
Putting it together
Once you have the HTML and the current web’s URL the rest is easy. Simply modify the HTML to include the desired menu items with a token for the web URL, replace the token with the actual URL, and insert the HTML into the page.
The end result looks like this:
The creation of the custom quick launch uses the same basic techniques.
Author: Doug Ware