A Sliding Navigation Menu with jQuery

August 1st, 2012 Leave a comment
Like the article?
hidden menu

As you probably know, jQuery allows us to create different navigation effects that can make our pages look polished and professional. In this article, I will show you how to create a bottom sliding navigation bar that uses some CSS3 and jQuery effects. If you would like to use this code in your own pages, you can follow this tutorial or download the zipped code files to have a starting point that you can use on your own site.

The Markup

In the HTML we simply need to set up the structure of our menu, creating headings and sub-menu items. The easiest way to do this is to setup some HTML list items that work as anchor tags. This way, you can click the menu items and they will work as links to the pages they should take you to. The IDs and Classes in the markup correspond to the CSS we are using in the next section.

<body>
  <div class="container">
    <ul id="menu">
      <li><a><span class="title">About</span>
        <span class="description">Learn about us and our services</span></a>
      </li>
      <li><a><span class="title">Work</span>
        <span class="description">See our work and portfolio</span></a>
      </li>
      <li><a><span class="title">Help</span>
        <span class="description">Talk to our support</span></a>
      </li>
      <li><a><span class="title">Search</span>
        <span class="description">Search our website</span></a>
      </li>
    </ul>
  </div>
</body>

Now we have the basic structure to begin formatting our menu:

the basic structure of menu

The Stylesheet

Now we have to style each section so the menu will look correct, starting with the “container” ID.

.container {
  width: 900px;
  height: 130px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  background-color: #fff;
  -moz-box-shadow: 1px 1px 6px #000;
  -webkit-box-shadow: 1px 1px 6px #000;
  -moz-border-radius: 0px 0px 20px 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-radius: 0px 0px 20px 20px;
}

In the above section we are positioning the container as well as adding some drop-shadow and border effects to the elements. We also need to hide the overflow so we only see the headings for each menu. Note that the drop-shadow effects are CSS3 so they will only work in browsers that support these effects. Here is what you should have:

drop-shadow effects

For the rest of the menu we are changing the font, pointer/cursor and doing some more positioning to get the sub-elements correct.

ul#menu {
  list-style: none;
  position: absolute;
  bottom: 0px;
  left: 20px;
  font-size: 36px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #999;
  letter-spacing: -2px;
}

ul#menu li {
  float: left;
  margin: 0px 10px 0px 0px;
}

ul#menu a {
  cursor: pointer;
  position: relative;
  float: left;
  bottom: -95px;
  line-height: 20px;
  width: 210px;
}

ul#menuspan.title {
  display: block;
  height: 26px;
  text-shadow: 1px 1px 1px #000;
  color: #B7B7B6;
  text-indent: 10px;
}

ul#menuspan.description {
  width: 140px;
  height: 80px;
  background-color: #B7B7B6;
  border: 3px solid #fff;
  color: #fff;
  display: block;
  font-size: 24px;
  padding: 10px;
  -moz-box-shadow: 1px 1px 6px #000;
  -webkit-box-shadow: 1px 1px 6px #000;
  box-shadow: 1px 1px 6px #000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

Here is what we have at this point:

menu

There are two more CSS rules we need to add to define the styles for the hover and parent link elements:

ul#menu a:hover span.description {
  background-color: #54504F;
}

ul#menu a:hover span.title {
  color: #54504F;
}

Now that we are done styling our menu, we can begin adding the jQuery effects that make it interactive.

interactive menu

The JavaScript

The JavaScript we are going to write will slide out the sub-menu item when we mouseover the heading of the menu and then pull the sub-menu back in when we move the mouse out.

$(function() {
  $('#menu > li').hover(
    function() {
      var $this = $(this);
      $('a',$this).stop(true,true).animate({
          'bottom':'-15px'}, 300);
      $('i',$this).stop(true,true).animate({
          'top':'-10px'}, 400);
    },

    function () {
      var $this = $(this);
      $('a',$this).stop(true,true).animate({
          'bottom':'-95px'}, 300);
      $('i',$this).stop(true,true).animate({
          'top':'50px'}, 400);
    }
  );
});

As you can see, there are two functions here that move our sub-menu elements up and down. To slide out the link, we change the bottom position and animate that. When the mouse moves away, we reverse the process and pull the menu back down and hide it.

hidden menu

This is the end of the jQuery sliding menu tutorial. This menu works well at the top of the page or could be positioned to the bottom of the page for a unique navigation style.

Article Source Files

DescriptionNameSizeDownload method
Sliding Navigation Menu with jQuery Source Codejquery-sliding-menu-sources.zip2KBHTTP
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment