Sliding Panel Menu using jQuery

Sliding Panel Menu using jQuery

In this tutorial we will be creating a beautiful and functional Sliding Panel Menu using jQuery. Navigation of a website plays an very important role in the user engagement and of-course to minimize the bounce rate. User get engaged and they start to dig the website when you provide them a simple and unique navigation. And it become a cherry on the cake when the navigation has some interactiveness. So lets start building our sliding panel menu,

HTML

First of all, lets start with the simple html,

<div id="menu">
<div class="arrow"><</div>
<nav>
<a href="#">Home</a>
<a href="#">An introduction: Design in 2012</a>
<a href="#">Relevant figures in design</a>
<a href="#">Where is design heading?</a>
<a href="#">Influences</a>
<a href="#">Video</a>
<a href="#">Sources</a>
</nav>
</div>

The first inner div with class arrow, will define the position of arrow in the menu div, which of-course defines and indicated the sliding direction of the sliding menu panel. And the nav defines our menu items.

CSS

Now lets add some css and define the position of each div. Following style is for the menu id

#menu {
background: #9cb925;
border-right: 3px solid #ee4e1d;
width: 100px;
padding: 30px;
position: fixed;
z-index: 100000;

box-shadow: 4px 0 10px rgba(0,0,0,0.25);
-moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
-webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
}

#menu {
left: 0; /* Change to right: 0; if you want the panel to display on the right side. */
}

#menu:hover, #menu:focus {
left: 0 !important; /* Change to right: 0 !important; if you want the panel to display on the right side. */
}

And some css for arrow

#menu .arrow {
right: 2px; /* Change to left: 2px; if you want the panel to display on the right side. */
}

#menu .arrow {
font: normal 400 25px/25px 'Acme', Helvetica, Arial, sans-serif; /* Acme font is required for .arrow */
color: rgba(0,0,0,0.75); /* Arrow color */
width: 16px;
height: 25px;
display: block;
position: absolute;
top: 20px;
cursor: default;
}

#menu:hover .arrow {
transform: rotate(-180deg) translate(6px,-3px);
-moz-transform: rotate(-180deg) translate(6px,-3px);
-webkit-transform: rotate(-180deg) translate(6px,-3px);
}

As you can see, we have used the css3 transform property to rotate the arrow on hover the menu div and don’t forget the Acme font. You can use an arrow image for the same.

And some code for the nav,

#menu nav {
position: relative;
top: 75px;
}

#menu nav a {
padding: 10px 5px;
border-bottom: 1px dotted #c0c0c0;
display: block;
clear: both;
font: bold 13px/18px 'Open Sans', Helvetica, Arial, sans-serif;
color: #fff;
text-decoration: none;
}

#menu nav a:hover {
color: #ee4e1d;
}

jQuery

The following small snippet of jQuery is used to adjust the height of menu according to the height of document

<script type="text/javascript">
$(document).ready(function() {
$("#menu").height($(document).height());
});
</script>

An the following script will add some delay and hide the panel.

<script type="text/javascript">
$(document).ready(function() {
setTimeout( function(){$('#menu').css('left','-130px');},4000); <!-- Change 'left' to 'right' for panel to appear to the right -->
});
</script>

You can increase the delay by increasing the value 4000 as per convenience and requirement. We have mentioned in the code by commenting that if you want to make the right side sliding menu panel then what values should be altered.

If you loved the article then don’t forget to share the words and to stay updated in future on our latest articles, freebies and tutorials, you can subscribe us through various socials or RSS email newsletter.

Tags css3, featured, html, tutorials