Slide Out QuickLaunch – CSS & jQuery

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>

2 thoughts on “Slide Out QuickLaunch – CSS & jQuery

Leave a Reply

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