Create The Fanciest Dropdown Menu You Ever Saw

Web Design — Sun, 26 Jul 2009 22:27:13 +0000

Good evening web designers. I hope you have all had a great weekend, and are ready to start the working week tomorrow. I have something very special to share with you today. Before I begin, I want to remind you of a free website builder called Wix, using which you can create beautiful, professional websites. Now let’s continue…back in June when I wrote the post 21 Beautiful And Creative Navigation Menus, we had a comment from Brian Cray, in which he shared his menu with us. After speaking with Brian, he agreed to write a tutorial for us on how he created his website navigation menu.

Recently he has changed his website design and the layout, but this tutorial is sweet, and one amazing navigation! Here is a bit about Brian…

About Brian…
Brian Cray writes a blog that helps web 2.0 professionals build better websites. Among other things, he is known for his development of Nearby Tweets and PXtoEM.com. Feel free to follow him on Twitter.

Be sure to check out some of the services that Brian provides, and if you have any questions for Brian feel free to drop in a comment and im sure he will reply.

What will you be building?

See the working demo

* * * * *

1. Making a basic dropdown that works

Before I begin – for those of you who want an easy way out of this tutorial, you can create a free flash website with Wix that will look like a very professional website. Now for those who are still interested in going through with the tutorial, I will continue. Web designers and developers find themselves creating dropdown menus over and over. I’ve drilled dropdown menu production to a science. Seriously. Here’s the benefits of Brian Cray’s basic dropdown menu code:

Can be put anywhere on site in a matter of seconds
Forces no styling on the menu, but adapts to ANY styling
Can handle multiple dropdown levels gracefully
Covers variable-width tabs and dropdown menus
Semantic – only two classes needed on an otherwise plain UL

Here’s what the basic dropdown looks like

Let’s go over my dropdown menu code first as it provides the basis for the fanciest dropdown menu you ever saw.

The basic HTML

You’ve seen this kind of thing a million times. But take notice of the two UL classes: tabs and dropdown.

[html]

[/html]

The tabs class makes the first UL a horizontal tab bar. The dropdown class makes the other UL dropdown menus. Simple, right?

The basic CSS

This CSS sets and resets the necessary styles so you don’t have to worry about your menu inheriting a bunch of crap that will make the menu look unexpected.

[css]/* tabs
*************************/

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

/* dropdowns
*************************/

ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}

ul.dropdown ul.dropdown
{
top: 0;
left: 95%;
}

ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}

ul.dropdown li a
{
display: block;
}[/css]

The basic jQuery

The jQuery behind this is genius. It will pick up ANY dropdown class on the page and turn it into a working dropdown menu.

[js]$(function () {
$(‘.dropdown’).each(function () {
$(this).parent().eq(0).hover(function () {
$(‘.dropdown:eq(0)’, this).show();
}, function () {
$(‘.dropdown:eq(0)’, this).hide();
});
});
});[/js]

And that’s all you need to add to each project to create dropdown menus in a flash! Now lets take this concept a step farther and REALLY light up the show.

2. Making the basic menu look fancy

Here’s what the fancy menu looks like that we’ll create below

The first thing to do to make something fancy is to add colors and images.

The images

The fancy HTML: what we’ve changed

Wrapped everything in a #menu div
Added h4 elements to add another layer to the menu’s organization
Added a “hasmore” class to the menu items containing dropdown menus
Added a “last” class to the last menu item in dropdown menus
Added a element around the main menu items

[html]

[/html]

The fancy CSS: what we’ve added

Added the * {margin:0; padding:0} simple reset hack (I know, there are better resets)
Styled to body
Removed underline from links
Styled the menu heavily

[css]/* hack reset (for production, use Yahoo! reset CSS)
*************************/

*
{
margin: 0;
padding: 0;
}

/* body
*************************/

body
{
font: 14px/21px Georgia, serif;
color: #370707;
background: #e3d79b url(images/mainbg.jpg) left 40px repeat-x;
}

/* links
*************************/

a:link, a:visited, a:hover, a:active
{
text-decoration: none;
}

/* inline elements
*************************/

strong
{
font-weight: bold;
}

/* menu-specifc
*************************/

#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: #ffb35a url(images/topbg.gif) repeat-x;
border-bottom: 1px solid #000;
}

#menu ul
{
margin: 0 auto;
}

#menu ul li.hasmore
{
background: url(images/drophighlight.png) no-repeat center 27px;
}

#menu ul li h4
{
margin: 0;
}

#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}

#menu ul li a
{
color: #9b2021;
padding-left: 4px;
}

#menu ul li a img
{
vertical-align: middle;
}

#menu ul li a:hover
{
background: url(images/topselectionleft.png) top left no-repeat;
}

#menu ul li a span
{
display: block;
padding: 0 15px 0 11px;
}

#menu ul li a:hover span
{
background: url(images/topselectionright.png) top right;
}

#menu ul.dropdown
{
padding: 10px;
background-image: url(images/dropdown.png);
overflow:hidden;
border-bottom: 1px solid #dc902f;
width: 290px;
}

#menu ul.dropdown li a
{
border-bottom: 1px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
}

#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}

#menu ul.dropdown li a:hover
{
background: url(images/menuarrow.png) no-repeat left center;
}

#menu ul li h4 a:hover
{
background-image: none;
}[/css]

The fancy jQuery: what we’ve changed

Used the hoverIntent jQuery plugin by Brian Cherne instead of jQuery’s default hover to prevent unintended dropdown menus
Used the easing jQuery plugin by GSGD to add a visual effect to dropdown menu items
Changed the default dropdown menu show() and hide() functions to slideDown() and fadeOut() to add some pizzazz (without being annoying)
Preloaded the images necessary to make the menu happen

[js]$(function () {

$(‘.dropdown’).each(function () {
$(this).parent().eq(0).hoverIntent({
timeout: 100,
over: function () {
var current = $(‘.dropdown:eq(0)’, this);
current.slideDown(100);
},
out: function () {
var current = $(‘.dropdown:eq(0)’, this);
current.fadeOut(200);
}
});
});

$(‘.dropdown a’).hover(function () {
$(this).stop(true).animate({paddingLeft: ’35px’}, {speed: 100, easing: ‘easeOutBack’});
}, function () {
$(this).stop(true).animate({paddingLeft: ’0′}, {speed: 100, easing: ‘easeOutBounce’});
});

pic1 = new Image(310, 672);
pic1.src = “images/dropdown.png”;

pic2 = new Image(4, 40);
pic2.src = “images/dropselectionleft.png”;

pic3 = new Image(394, 40);
pic3.src = “images/dropselectionright.png”;

});[/js]

3. The final result with files

Congratulations! You’ve walked through creating the fanciest menu ever! By the way, if you feel frustrated with designing, or just want an easy way out, you can always create a free professional website with Wix.

Here are the files this menu uses:

fancydropdown.js – combines jQuery, easing plugin, hoverIntent plugin, and fancy dropdown menu code
fancydropdown.css – combines dropdown menu styling and fancy menu styling
fancydropdown.html – the HTML of the fancy menu
fancydropdownimages.zip – all of the images used to create the fancy menu
fancydropdown.zip – all of the files used to create the fancy menu

Web Design Dev » Brian Cray Services