How to add an off canvas menu to SharePoint 2013 (On prem and Online)



I realized that i very seldom add a tutorial on how i do something cool like adding a off canvas menu to SharePoint 2013, so this is the time! 😉

I will go through how to add the off canvas in the master page and how to replace the “SharePoint” in Suite Bar.
The result will look like this, you will have to add your touch to the menu style.

Screen Shot 2013-12-27 at 22.07.22

To complete this tutorial you need the following:

  • A Visual Studio Project that switch master page to a custom master page. (You can find my Farm Solution tutorial here. & SharePoint Online here)
    !!Don’t ever modify the default master page!!
  • You need two images (22 x 22px), one RWD menu icon, and One Close (X) Icon. See above image…

Before we start just make sure you have done the following to your project.

  • For a Farm solution you must have your SharePoint “images” Mapped Folder and SharePoint “Layouts” Mapped Folder. (Right click on the project and Choose Add ->…)
  • For a Sandbox Solution (SP Online) you need your Style Library Module ready. (You can read how to do this in my tutorial above…)

To get a better understanding of my code namespace, here is screen shot of my completed project.
Screen Shot 2013-12-27 at 22.24.35

Lets get started!

  1. Copy your two images to the Image folder. You can right click on the Image folder in the project and choose open in file explorer…
  2. Create a “RWD.Default.css” in your Layouts -> Styles folder.  Add -> New Item -> Style Sheet (Under the category Web)
  3. Open the CSS and add the following style. The style manage the smooth transition of the off canvas and some other canvas related stuff.
  4. Now create a “RWD.Custom.js” file under your Scripts folder. Add -> New Item -> Java script file (Under the category Web)
  5. Open the script file and add the following code. This code looks at the open/close classes and remove/add class on click.
  6. You must add jQuery to your scripts folder. You can get it here: http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js. Either create a file and paste the code or copy this file in to the project.
  7. Open your custom master page and in the end of the </head> after the corev15.css registration add the following: Make sure to change the name space in the links to match your project and file names.
  8. Just under <body> add the following div:s
  9. In the end of the master page just before </body> add the following:
  10. Now lets get the menu sorted. I like to have my menu above s4-workspace so that is what i have done here as well.
  11. Remove the menu from the master page and copy this one an add it just above <div id=”s4-workspace”>. (You can see below how the menu code looks so that you can find it and remove it.)
     
  12. In the top of the new menu you have a image (mine is called cross-24.png) replace it with your close image and URL to it.

We will now replace the “SharePoint” in the Suite bar to left corner with the Off Canvas menu opener image/link. I describe the Farm solution example first and under that the SandBox (SP Online) solution.

For Farm Solutions

  1. Now we will make a Delegate Control that will replace the “SharePoint” in the Suite bar to left corner with the Off Canvas menu opener image/link.
  2. Right click in your project and Add – New Item -> User Control, Name it “RWDMenuIcon” or similar.
  3. You will now get a folder called ControlTemplates followed by a folder with your project name. In that folder you will find the RWDMenuIcon.ascx. Open it and add the following code.
  4. Now expand the RWDMenuIcon.ascx and you will see a file called RWDMenuIcon.ascx.cs, open it and replace every thing under “public partial class RWDMenuIcon : UserControl {” with this code.
  5. Your SPContext will get underlined (in red as an error), right click on one of them and choose resolve -> using Microsoft.SharePoint.
  6. Change the URL and image name (my image is called menu-24.png as you can see in the code.) Save and close.
  7. If you have a FeatureElements folder as i do in my project then right click on it and choose Add -> New Item – > Empty Element. Name it “RWDMenuIcanElement”. (If you don’t have a FeatureElements folder, just right click on the project and do the same. )
  8. Open the new file Element file and replace the code with this one. Don’t forget to change the ControlSrc= URL to your User Control under the ControlTemplates folder.
  9. You are now ready to deploy and test your off canvas! Good Luck!

For SandBox Solution (SP Online)

  1. Open the master page and copy the following code just under <div id=”suiteBarRight”>. Replace the image URL and file name with your menu image.
  2. Your done, Good Luck!

You can download the Farm Solution project from GitHub.

2 responses to “How to add an off canvas menu to SharePoint 2013 (On prem and Online)”

  1. aamy says:

    Kindly provide screen shots for more clearity.

Leave a Reply

Your email address will not be published. Required fields are marked *