Adding reveal, overlay & push sidebars to a SharePoint site

Sidebars are all the rage in web development today; from their simple beginnings on mobile devices – where the flexibility to tuck a full menu or block of content behind a click or swipe can net valuable screen real estate – to growing usage on the web in general, you can’t deny their popularity. Now wouldn’t it be great if you could add the same capabilities into your SharePoint-based applications & sites? How’s that for a leading question ;)

We’ve had great success with the Slidebars jQuery plugin by Adam Smith; it fits two key criteria we look for anytime we’re evaluating the addition of a new jQ plugin to a SharePoint application – compact size & CSS that won’t conflict with the myriad of Core.css quirks all us SharePoint developers must endure.

The first criteria is easily checked and Adam even calls it out in the first paragraph of his site: “ultra-light at 1469 bytes (js) & 499 bytes (css).” Well done Adam! As for the second, well that just requires some quick validation within a SharePoint site and we’re happy to report it works great, especially with a CorasWorks Application Designer-based site.

Implementation is straightforward – within your site’s masterpage…

  1. Load the obligatory resource files: jQ (1.8+) as well as the Slidebars JS & CSS
  2. Add (or if you already have one, update) a “viewport” meta tag to the page:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. As a direct child of the <body> tag, wrap the <form> tag that constitutes the main portion of your page content within a DIV which you give an ID of “sb-site”
  4. As siblings to new said DIV, add ‘n‘ additional DIVs each with a class of “sb-slidebar”; you can have more than one sidebar and can set its position on the page through additional helper classes
  5. Initialize the plugin on page ready:
    $(function() {

Optionally, you can then add new or update existing page elements that will trigger the opening & closing of the sidebars; this is accomplished by just adding corresponding CSS classes to the elements, described on the Slidebars site here.

We’ve found Slidebars to be a great way to bring an improved user experience into our SharePoint-based applications – and thanks to features like CAPS and CAPS-Xt, CorasWorks customers can even dynamically load sidebar content based on user interaction, roles & permissions. It’s a great complement to our existing feature set and one I hope you’ll try out yourself.

Comments are closed.