How-to: Create a Simple Dropdown Menu with jQuery and CSS


ATTN: This method does not work with IE7 or below.

So a few days ago, Danny asked me if I could create a simple drop down menu for iA to cut down the clutter. Since iA is powered by WordPress, I know for sure that a jQuery library was included. Demo of the menu can be seen at idolsavenue.com! The code provided below will be based on iA with some explanations!!

The original menu tree
Hold CTRL + U to view the source. For some reason “code” isn’t displaying the html markup but rather rendering it.

What it will be
Hold CTRL + U to view the source. For some reason “code” isn’t displaying the html markup but rather rendering it.

The javascript (jQuery)!
I’m only gonna show the script for the “Movies” menu tree since they all are similar to each other.

To get the javascript below working in wordpress, you need to first put this little php script wp_enqueue_script(‘jquery’); a line above wp_head();

Also, instead of using “$” like you would normally do, I have to use “jQuery” to start each function. I dunno why yet, but when I do I’ll update the post!!


jQuery(document).ready(function(){
// hide on default
jQuery("#header ul li.movie ul.moviesub").hide();

// when mouseover - show
jQuery("#header ul li.movie").mouseover(function() {
jQuery("#header ul li.movie ul.moviesub").show();
});

// when mouseout - hide
jQuery("#header ul li.movie").mouseout(function() {
jQuery("#header ul li.movie ul.moviesub").hide();
});
});

The CSS
Since iA menu is inside a div#Header. The CSS you’ll see below will start with #header. Like the jQuery part, I will only include the CSS code for the “Movies” menu tree.

The Parent: Using position absolute, I put the “parent ul” at the bottom right corner. “li and a” are display in blocks with float left to keep them horizontally.

The Child: The “child ul” are hidden as well in case someone turn javascript off. Also using position absolute, I put the “child ul” where I want it to show up when a mouse is hover over the “parent li”. In this case, the “child ul” is placed underneath the “parent li”. The “child li and a” are display in blocks but they aren’t float to keep them listed vertically.

/* The Parents */
#header ul {position: absolute; right: 0; bottom: 0; text-align: right; font-size: 14px; z-index: 3;}
#header ul li {float: left;}
#header ul li:hover {background: #000; color: #999;}
#header ul li a {color: #999; display: block; padding: 8px 10px 7px 10px; font-weight: normal;}
#header ul li a:hover {color: #fff;}

/* The Child */
#header ul li ul.moviesub {display: none;}
#header ul li ul.moviesub {position: absolute; top: 32px; right: 61px; width: 130px; height: 126px; float: none; background: #000;}
#header ul li ul.moviesub li {display: block; float: none; text-align: left; font-size: 10px;}
#header ul li ul.moviesub li a {float: none; height: 15px; padding: 3px 5px 2px 10px; border-bottom: 1px dotted #555;}

That’s it!! Have fun and I hope this is useful!

Advertisements
This entry was posted in CSS, jQuery. Bookmark the permalink.

One Response to How-to: Create a Simple Dropdown Menu with jQuery and CSS

  1. jhon says:

    Thank you for information.I think this nice post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s