Windows 8 Sidebar For Website Using jQuery

Introduction

In this article we will create a sidebar for our website that looks very similar to the Windows 8 sidebar. This sidebar can be used as navigation menu or it can be used to show other options. The specialty of this sidebar is that it is visible only when the user wants it and for the rest of the time it will be hidden. So let's start.

Logic behind Sidebar

I have used the following logic to create the sidebar for my demo:

We need a div that is fixed to the right side of the website. Let's call it a container div.
The height of the div must be set to the width of the user screen. So that it can be accessed from any point of the right edge.
The width of the side bar can be customized deending on the content it carries. In my demo I'm using 6% of the total width as the width of my sidebar.
We need another div of the same size as the container div. This div will be used for holding our content. Let's call it an item div.
For effects, we will be using the sliding effect of jQuery on both the container and the item div.
Initially our side bar will be hidden and it will be shown to the user only when the curser touches the right edge of the website.
Now to make the sidebar active, I'm monitoring the mouse movement of the user. The moment the mouse touches the right edge of the web site the X-coordinate of the mouse will be equal to the width of the screen. At that time we can show our sidebar.
Again, to hide the sidebar when the curser leaves the sidebar, I'm using the mouse X-coordinates. If the mouse x-coordinate plus the width of the sidebar is less then the width of the screen then we hide the sidebar since the mouse is out of the sidebar.

Coding the sidebar

Add the following HTML to your file:

<html>

<head>

</head>

<body>

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.c-sharpcorner.com%2Fconference2014%2F" onclick="javascript:window.open(this.href,

'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">

</a>

<a href="https://twitter.com/share?url=http://www.c-sharpcorner.com/conference2014/" onclick="javascript:window.open(this.href,

'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img id="tw" src="http://icons.iconarchive.com/icons/fasticon/web-2/256/Twitter-icon.png" width="100" height="100" ></a>

<a href="https://plus.google.com/share?url={http://www.c-sharpcorner.com/conference2014/}" onclick="javascript:window.open(this.href,

'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img id="gp"

src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/512/Google-plus-icon.png" width="100" height="100"/></a>

</div>

</body>

</html>

The preceding HTML is for creating a Sharing sidebar. You can use it as in Google Plus, Facebook and Twitter share sidebar.

Add the following CSS in your file for designing the sidebar.

body{

margin:0;

}

#ctnr{

background-color:black;

width:6%;

height: 100%;

position:fixed;

top:0px;

right:0px;

display:none;

}

#fb{

margin-top:100px;

border-radius:50% ;

}

#tw{

margin-top:100px;

border-radius:50% ;

}

#gp{

margin-top:100px;

border-radius:50% ;

}

#item{

display:none;

}

Now comes the difficult part. The jQuery is a bit tricky but if you have gone through the logic then it's a cakewalk.

Add the following jQuery to the file:

$(document).ready(function(){
$("body").css("width",$(window).width()+"px");
$("body").css("height",$(window).height()+"px");
$(document).mousemove(function(e){
if(e.pageX===$(window).width()-1){
$("#ctnr").show("slide",{direction:"right"},300);
$("#item").show("slide",{direction:"right"},400);
}elseif(e.pageX+$("#ctnr").width()<$(window).width()-1){
$("#ctnr").hide("slide",{direction:"right"},300);
$("#item").hide("slide",{direction:"right"},300);
}
});
});

Line numbers 2-3 set the size of the body equal to the size of the screen. This step is important since we have given a container width in percentage.

Line number 4 adds a mouse movement listener on the document to track the mouse movement on the webpage.

Line number 5 checks whether or not the mouse is touching the right edge of the website.

Line number 7 brings in the side bar container.

Line number 8 brings in the side bar items. We have used two different timings for sliding to mimic a Windows 8 menu style.

Line number 9 checks if the mouse is away from side bar. Line numbers 10-11 hides the sidebar and its items.

Output

Live Demo

Summary

That's all for this article. I hope you have enjoyed reading this article. In case of any doubt feel free to ask in comments.

References