How to Create a jQuery Animated Sliding Sub-Menu Navigation

by Jake Rocheleau

on September 6, 2011

in Tutorials

We have seen a lot of different jQuery techniques over the years. This comes at a time when website navigation is at an utmost importance. User experience is key in all forms of design. Without perfecting your layout it will be difficult to keep visitors coming back for more. And with so many jQuery Plugins for Navigation it’s hard to miss something great.

Below I’ll be going into the code for developing a very basic dropdown navigation in jQuery. This will include a sub-menu of links to different profiles such as Twitter and Facebook. To create your own setup I would recommend checking Icon Finder to match any social networks you enjoy. But this navigation can be used for almost anything requiring a drop-down setup.

DesignMag Sliding jQuery Navigation Menu Tutorial Demo

Getting Started

We should first examine the basic HTML structure. I’m using HTML5 doctype to format the page outline and list structures. It shouldn’t affect your document or the scripting if you use XHTML or even HTML 4.01. In the header I’ve included just a few external files for what we need.

First a basic styles.css for laying out our fonts, resets, formatting, etc. I’ve also included the latest jQuery 1.6.1 library from Google Code hosting. All of this code is accessible from the demo download above if you need a better view. But I’ve included a bit of the header below:

[cc lang="html"]
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>jQuery Animated Sliding Menu Navigation[DEMO]</title>
<style type=”text/css” media=”all”>
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
</style>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’></script>
</head>
[/cc]

Many of you may have also noticed I’ve included an @import statement for external CSS styles. Namely these are being loaded from Google Web Fonts to include an alternative for our header text. I’ll explain how to use these fonts a bit later in the tutorial. For now let’s finish one more aspect of the HTML – our navigation menu!

In the content area I’ve used HTML5 sections for labeling off areas. The right column will contain our dropdown navigation and a small header. I’ve decided to use an unordered list for simplicities sake. This has the ID #slidenav while each internal list item has the class .nitem. Note that only root items will have the .nitem class, not our sub-menu nav.

[cc lang="html"]

Our Friends

[/cc]

Instead I’ve used a much simpler technique to append sub lists directly after the list item. We can give each a class of .nsub and use jQuery later to hide them. The icons I’m using are each separated by span elements with different IDs. I’ve used these in CSS styles for positioning. But they can also be useful for other functionality – if you wish to replace the icon on hover, for example.

Breaking into Web Fonts

We should now jump ahead into coding our CSS. Styles are just as easy to understand as HTML elements and certainly if you understand the document structure. I won’t be explaining the whole stylesheet since it doesn’t include a ton of new features. But let’s start with the inclusion of Google’s webfont system.

From their main page Google web fonts can seem confusing. But broken down into steps, you’re merely:

  • choosing a font or fonts you wish to include in your page
  • including the external CSS into your page
  • start using font names in font-family property

Google actually lets you use the specific font name for anything you’d like! So in my example we are including a new font Gloria Hallelujah. I could have included many fonts in one stylesheet from Google, but honestly we don’t need any more. It takes a lot longer for pages to load the more fonts you include through Google, so it’s best to limit below 5 or 6.

[cc lang="css"]h1 { font-family: ‘Gloria Hallelujah’, cursive, Georgia, sans-serif; font-size: 4.6em; color: #666; text-transform: none; line-height: 2.2em; }
[/cc]

In the above code we’re adding this font family as our priority 1 font. If Google is unable to load for some reason we can fallback onto Georgia or sans-serif. A very simple technique, yet powerful in today’s modern web sphere. We should now focus on coding our sliding navigation and animating with jQuery.

Sliding Nav List CSS

It’s best to start by planning ahead for our #slidenav list. This ID is used to target the majority of our internal styles, even relative to our sub navigation lists. We set all the list items to 1.6em Arial fonts. But the padding and line-height is all added into our anchor links, that way they can display as block elements.

[cc lang="css"]/* @group sliding nav */
#slidenav { margin-bottom: 15px; }
#slidenav li { font-family: Arial, Verdana, sans-serif; font-size: 1.6em; font-weight: bold; margin-bottom: 2px; }
#slidenav li a { display: block; padding: 2px 10px; text-decoration: none; color: #dedede; line-height:40px; }
#slidenav li a:hover { background: #eaf3f9; color: #939393; }

#slidenav .nsub { font-size: 0.7em; font-style: italic; padding-left: 22px; }
#slidenav .nsub li { padding: 0; color: #666; }
#slidenav .nsub li a { color: #a9cee9; line-height: 1.7em; }
#slidenav .nsub li a:hover { text-decoration: underline; color: #4198da; background: #fff; }
[/cc]

The .nsub class works in a very similar way. We append this onto any sub-list of links and all the subsequent items. For the sub links I’ve removed a lot of the padding so these will actually list out like anchor links. Otherwise we would be taking up a lot of unneeded space on screen. I’ve also simplified the hover effects quite a bit.

Hopefully you can see the document order and understand how our page layout is being constructed. Again I recommend downloading our source archive if you need to look at the whole code. But with this in mind let’s move into the basic jQuery functionality.

jQuery Magic

There isn’t a whole bunch of code required to get this working. I’ve chosen to place the scripting inline with our HTML code, towards the very bottom of our page document. Placing your script tags right before the closing </body> will let the page fully load before getting hung up on JavaScripting. You may not even notice much of a difference – so feel free to write your code anywhere internal or external.

We need to start by calling our $(document).ready() status. jQuery will recognize to hold off on any effects until after the page finishes loading. This is standard within any jQuery script manipulating the Document Object Model. We are targeting all .nsub elements on page and choosing to hide() them by default. This prevents our sub lists from displaying all at once.

[cc lang="javascript"]$(document).ready(function() {
$(‘.nsub’).hide(); // hide sub-navigation items by default

$(‘.nitem a’).live(‘click’, function(e){
e.preventDefault();
$(this).parent().next(‘.nsub’).slideToggle(‘slow’);

if($(this).parent().next(‘.nsub’).is(‘:hidden’)) {
$(this).addClass(“CurrentlySelected”);
} else {
$(this).removeClass(“CurrentlySelected”);
}
});
});
[/cc]

We can trace the majority of our animation to a live click event handler. This is demonstrated in the code above by checking each anchor link nested inside a .nitem class. Whenever one of these links are clicked we immediately call preventDefault() on the event. This will disable the href value on the links so our page won’t be redirected.

Next we’re using a bit of document node traversing to target sub-lists. From the anchor link we call parent().next('.nsub') to lock onto the next sub navigation list. We can use the slideToggle() method to transition between showing and hiding these lists. This is one robust method with a few possible customizations in the parameters.

And finally we are checking if the sub listing attached to each anchor is hidden or displaying. If hidden we are adding a .CurrentlySelected class. This can be used when you transition from page-to-page keeping each of the menus open. Although this is certainly a simple option there are other alternative ways to code in this functionality. But with this method we can save a few headaches!

DesignMag Sliding jQuery Navigation Menu Tutorial Demo

Conclusion

Hopefully you’ve taken away a bit of web design knowledge from this tutorial. We’ve constructed a full HTML5 layout and used some newer CSS styling techniques throughout. We also touched upon Google Web Fonts and utilizing jQuery effects for displaying and flipping through page elements.

Be sure to download the demo source code for yourself if you’re interested in tinkering around. Additionally let us know your questions or thoughts in the discussions area below.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+