Two posts in one today.
First up is the Quick Launch Menu (the navigation menu on the left). On many websites, you’ll find a navigation structure where there is a heading menu and several submenus underneath those. For example:
- About Us
-
Our Menu
- Appetizers
- Main Courses
- Desserts
- Drinks
- Specials
In many instances, especially where the menu structure can get rather long, the entire menu system is made to be collapsible, so you have to click a heading to expand the menu underneath. In our example, we’d have to click on “Our Menu” to look at the various food options.
Out of the box, SharePoint does not have this functionality. Though you can enable the Publishing infrastructure and utilize it’s Navigation options, this only gets you as far as the menu that we have above: you can click on headings and subheadings but you can’t collapse headings. You can change the master page for the site so that subheadings are flyouts (see http://msdn.microsoft.com/en-us/library/ms466994.aspx), but that’s not what exactly we want. In order to do this, we need to utilize jQuery. The blog entry here has a nice jQuery script that will get you want quickly and easily.
http://borderingdotnet.blogspot.com/2013/04/accordion-left-navigation-for.html
Just put the script within a <script type=”text/javascript”> tag in the master page and add tags to reference jQuery (I recommend using a locally saved copy of jQuery – SharePoint had a knack for mangling externally linked JS files when I tried this) at the bottom of your master page, and you’re all set!
Well, maybe not so fast.
See, in past versions of Microsoft SharePoint Designer, it was easy to open a master page and edit it. That’s not the case in SharePoint 2013. With the introduction of what Microsoft calls Design Manager, Microsoft is trying to move users, especially those who aren’t familiar with behind the scenes coding, away from directly modifying web pages and potentially breaking things. Which is all well and good: dealing with heavily modified SharePoint pages can be a pain in the ass sometimes. Unfortunately the new changes in Design Manager are also a pain in the ass because, by design, the master page isn’t really supposed to be modified. It’s built out of a HTML page by the same name. So how do we do it?
1. Open the site to be modified in SharePoint Designer 2013 and navigate to the Master Pages section.
2. Choose an existing Master Page to edit. Right click the associated HTML page (e.g. Seattle.html or Oslo.html) and choose “copy.”
3. Paste the file into the same directory.
4. Rename this file to a name of your choosing. You’ll be prompted about updating links on the page; choose “Yes” to this dialog.
5. SharePoint will now create a new Master Page using the HTML page and name you’ve chosen.
6. Wait a bit – there are some changes that SharePoint needs to make these files work correctly.
7. You can now edit the new HTML file you copied. If you are looking to add SharePoint ASP objects, you may want to make use of the Snippet Gallery to do it. The Snippet Gallery can be accessed from the link given in the comments at the top of the HTML page. You want to use the Snippet Gallery because the new SharePoint Master Page format utilizes special HTML comments to implement ASP .NET tags (e.g. SPM:<SharePoint:>).
8. Save the file in SharePoint Designer.
9. From the site’s management page, navigate to the Master Page gallery and publish the HTML page (NOTE: You need publishing enabled both at the Site Collection and Site levels).
10. Choose the site’s new format by going to the “Master Page” settings under “Look and Feel.”