Sliding Panel Menu using jQuery

Sliding Panel Menu using jQuery

Demo Download

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,

01 02 03 04 05 06 07 08 09 10 11 12

<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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

#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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

#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,

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

#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

1 2 3 4 5

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

1 2 3 4 5

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.