Sliding Panel Menu using jQuery

Sliding Panel menu using jQuery
254 Flares 254 Flares ×

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.

254 Flares Twitter 7 Facebook 8 Google+ 9 LinkedIn 229 Pin It Share 1 254 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

14 Comments

  1. It doesn’t appear to be navigable without using a mouse so it isn’t handicapped accessible. A big problem for sites who wish to comply with section 508 of the Americans with Disabilities Act.

    • It works on touch as well by just clicking the panel. It opens the menu and it stays open until you click somewhere else. Links work as well. But yes, I see what you mean if you disable the CSS. The links are not in a list. But this can be fixed easily.

  2. How would you modify this awesome panel to operate by mouse-click instead of hover to reveal it? Sorry, I’m a newbie here.
    Thanks!

  3. I tried moving it to the right(via the methods in the CSS comment), but failed to get it right. It moves to the left after it collapses. Any solutions?

  4. You need to modify the Script too. This is not mentioned here.
    $(document).ready(function() {
    setTimeout(function () { $(‘#menu’).css(‘right’, ‘-130px’); }, 0);
    });

  5. This looks perfect for what i need, but has anyone figured out how to have the menu appear from the top or bottom?

    kind regards

    D

  6. This does not respond to touch on an iPad at all. Which completely defeats the purpose of having a sliding navigation panel.

  7. I am getting an error and it doesn’t seem to work. the error is “Uncaught ReferenceError: $ is not defined” – a new bee sorry! can u help?

Leave a Reply

(*) Required, Your email will not be published