Overview
Christmas is nearly with us and it has been a long while since my last post. To try and give some people a little Christmas cheer I am releasing part one of my new set of jQuery plugins for many of my Quick Tips that I have posted. Today’s update is to the ability for a user to hide / show the Quick Launch menu. Although the previous version worked well, there were a number of requests for new functionality which I have integrated into my new version. The new version also makes configuration MUCH easier and friendlier for non-techy types.
New Features:
- Plug-in Architecture based on jQuery Boilerplate
- Ability to set default state of the Quick launch (HideOnDefault)
- Quick launch state is now saved across page views using Cookies. This can be turned off.
- Re-written code.
- Fully configurable for various scenarios (Have tested on OOTB & Custom Masterpages)
- 2013 Compatible. I can confirm the plug-in works on the OOTB Seattle.master with no code changes (only plug-in configuration).
How to use:
The quick launch plug-in can be used and applied as follows:
|
1 |
$('#s4-leftpanel').quicklaunchHide() |
Options:
The following default options are available:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// collapsed state image collapseImage: '/_layouts/images/mewa_leftPage.gif', // expanded state image expandImage: '/_layouts/images/mewa_rightPage.gif', // location for the button to be prepended to prependLocation: '.s4-tn', // The Main 'content' div that the main body content is within mainDiv: '.s4-ca', // The Margin that the mainDiv will have once hidden. leftMargin: 0, // Do you want to hide the quicklaunch as a default. (Overwritten when cookies are enabled) hideOnDefault: false, // Allow Cookies to be set allowCookie: false, // Name of the Cookie cookieName: 'quicklaunchStatus', |
No CSS is required for the plugin and the main plugin selector should be the side navigation div that you are hiding. So in the case of SharePoint 2010 this will be “#s4-leftpanel”
Full Usage (2010 / 2013)
2010 Full Usage (OOTB Masterpage)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.LISP.Quicklaunch.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#s4-leftpanel').quicklaunchHide({ collapseImage: '/_layouts/images/mewa_leftPage.gif', expandImage: '/_layouts/images/mewa_rightPage.gif', prependLocation: '.s4-tn', mainDiv: '.s4-ca', leftMargin: 0, hideOnDefault: false, allowCookie: false, cookieName: 'quicklaunchStatus' }); }); </script> |
2013 Full Usage (OOTB Masterpage)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.LISP.Quicklaunch.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#sideNavBox').quicklaunchHide({ collapseImage: '/_layouts/images/mewa_leftPage.gif', expandImage: '/_layouts/images/mewa_rightPage.gif', prependLocation: '.s4-titlerow', mainDiv: '#contentBox', leftMargin: 20, hideOnDefault: false, allowCookie: false, cookieName: 'quicklaunchStatus2013' }); }); </script> |
Hope you enjoy this plug in and as always if you have any issues please let me know.
Download
Developer Version : jQuery.LISP.quicklaunch.js
MinifiedVersion : jQuery.LISP.quicklaunch.min.js
