Today I want to show you how to slide-out the QuickLaunch bar using CSS and jQuery. In SharePoint the QuickLaunch bar was visible on left side, now we are going to hide the QuickLaunch on Page Load. The Quick Launch only slide out when the user hovers the area of the Quick Launch. This gives the nice effect on QuickLaunch.

The outer area of the QuickLaunch element id is “s4-leftpanel”. We are using this id to slide-out the QuickLaunch bar.

Insert the jQuery file to the masterpage or any page you want the effect.
Then add the following style to the same. This will floats and hide the QuickLaunch on the page.

<style type="text/css">
.s4-ca
{
margin-left:0px;
float:left;
}
#s4-leftpanel
{
position:absolute;
float:left;
z-index:1;
margin-left:-145px;
}
</style>


Then insert the following javascript to the page, which makes, when ever the user hovers the left of the page, the QuickLaunch bar which emerges from the Left and visible for the user.


<script>
$(document).ready(function()
{
$('#s4-leftpanel').hover(function()
{
$($(this)).stop().animate({'marginLeft':'0px'},200);
},
function()
{
$($(this)).stop().animate({'marginLeft':'-145px'},200);
});

});
</script>

Slide Out QuickLaunch – CSS & jQuery
Tagged on:     

2 thoughts on “Slide Out QuickLaunch – CSS & jQuery

  • November 30, 2012 at 9:46 AM
    Permalink

    Hi Shantha,
    Is there any possibility of doing the same effect on ribbon area?

    Reply
  • October 8, 2013 at 9:21 AM
    Permalink

    I can’t get this to work.

    Reply

Leave a Reply

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