Friday, December 31, 2010

[JQ] Create an animated drop-down menu

, , Leave a Comment
Learn how to create a HTML drop-down navbar.
Very simple way of creating an animated drop-down menu.
You only need to know the basics of HTML & CSS.

Here is the DEMO.
I'll show you how should the HTML, CSS and javascript files look like.
We'll have some buttons in a container,and the drop-down menu will be represented by an unordered list ( <ul>).

THE <HEAD>:






Drop-down
As you can see above we'll use 3 external files:
 -> "styles.css" , stylesheet file containing all our CSS
 ->"jquery.js", jQuery library
 ->"dropdown.js", our jQuery script.

THE <BODY>:
Let's break this apart:
 -> the "navbar" div is the div containing the entire dropdown menu.
 -> the "nav-wrap" div is the div containing the buttons, we're using this div to easily center the buttons-group horizontaly and verticaly
 ->the divs with the class="button" are the divs containing a single button, along with it's drop-down menu
 ->the <img> inside the "button" are the spacers between each two buttons.
 -> the <ul></ul> is a single button's drop-down menu
 -> the list element ( <li> ) is an option inside the drop-down menu.

Now, look again through the HTML and make sure you understand the whole thing.

THE CSS:
The css is kind of intuitive, you can see the whole stylesheet explained here:
http://www.copypastecode.com/59969/
This should be your "styles.css" file.

THE JQUERY:
This is by far the easiest part.
The whole script looks like this:
$(function() {
$('.button').hover(function() {
$(".drop", this).stop(true, true).show('slow', function() {});},
function() {
$(".drop", this).stop(true, true).hide('slow', function() {});}
);
});

It almost needs no explination...
When you hover over a button, we show the drop-down menu. When you hover off the button (now the button includes the drop-down menu too) we hide it.
A nice effect can be also achieved by replacing "show" with "slideDown" and "hide" with "slideUp". It's up to you....
This is the "dropdown.js" inside a "scripts" folder.

I hope you'ver understood the basics of creating a simple drop-down menu.
If there's something you don't get, simply ask in the comments section below :).

0 comentarii:

Post a Comment