Web Design Learning: Create The Fanciest Dropdown Menu You Ever Saw

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. 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

Contents…

* * * * *

1. Making a basic dropdown that works

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.

<ul class="tabs">

<li><a href="#">Dropdown 1a>

<ul class="dropdown">

<li><a href="#">Menu item 1a>

<ul class="dropdown">

<li><a href="#">Submenu item 1a>li>

<li><a href="#">Submenu item 1a>li>

<li><a href="#">Submenu item 1a>li>

ul>

li>

<li><a href="#">Menu item 2a>li>

<li><a href="#">Menu item 3a>li>

<li><a href="#">Menu item 4a>li>

<li><a href="#">Menu item 5a>li>

<li><a href="#">Menu item 6a>li>

ul>

li>

<li><a href="#">Dropdown 2a>

<ul class="dropdown">

<li><a href="#">Menu item 1a>li>

<li><a href="#">Menu item 2a>li>

<li><a href="#">Menu item 3a>li>

<li><a href="#">Menu item 4a>li>

<li><a href="#">Menu item 5a>li>

<li><a href="#">Menu item 6a>li>

ul>

li>

<li><a href="#">Dropdown 3a>

<ul class="dropdown">

<li><a href="#">Menu item 1a>li>

<li><a href="#">Menu item 2a>li>

<li><a href="#">Menu item 3a>li>

<li><a href="#">Menu item 4a>li>

<li><a href="#">Menu item 5a>li>

<li><a href="#">Menu item 6a>li>

ul>

li>

ul>

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.

/* 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;

}

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.

$(function () {

$('.dropdown').each(function () {

$(this).parent().eq(0).hover(function () {

$('.dropdown:eq(0)', this).show();

}, function () {

$('.dropdown:eq(0)', this).hide();

});

});

});

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

<div id="menu">

<ul class="tabs">

<li><h4><a href="#">In the blog »a>h4>li>

<li class="hasmore"><a href="#"><span>Recentspan>a>

<ul class="dropdown">

<li><a href="#">Menu item 1a>li>

<li><a href="#">Menu item 2a>li>

<li><a href="#">Menu item 3a>li>

<li><a href="#">Menu item 4a>li>

<li><a href="#">Menu item 5a>li>

<li class="last"><a href="#">Menu item 6a>li>

ul>

li>

<li class="hasmore"><a href="#"><span>Topicsspan>a>

<ul class="dropdown">

<li><a href="#">Topic 1a>li>

<li><a href="#">Topic 2a>li>

<li><a href="#">Topic 3a>li>

<li class="last"><a href="#">Topic 4a>li>

ul>

li>

<li><a href="#"><span><strong><img src="images/feed-icon-14x14.png" width="14" height="14" alt="RSS"> Subscribe to RSSstrong>span>a>li>

<li><h4><a href="#">Elsewhere »a>h4>li>

<li><a href="#"><span>Aboutspan>a>li>

<li class="hasmore"><a href="/about/#networks"><span>Networksspan>a>

<ul class="dropdown">

<li><a href="#">Twittera>li>

<li><a href="#">posterousa>li>

<li><a href="#">SpeakerSitea>li>

<li><a href="#">LinkedIna>li>

<li class="last"><a href="#">See more…a>li>

ul>

li>

<li><a href="#"><span>Bookmarksspan>a>li>

ul>

div>

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

/* 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;

}

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

$(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";

 

});

3. The final result with files

Congratulations! You’ve walked through creating the fanciest menu ever! 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 Learning

Video Tutorials

Followers

What Languge do you use ?

Create The Fanciest Dropdown Menu You Ever Saw

What will you be building?

Contents…

1. Making a basic dropdown that works

The basic HTML

The basic CSS

The basic jQuery

2. Making the basic menu look fancy

The images

The fancy HTML: what we’ve changed

The fancy CSS: what we’ve added

The fancy jQuery: what we’ve changed

3. The final result with files

No comments:

Post a Comment

About Me

Web Design Learning

Video Tutorials

Followers

What Languge do you use ?

Create The Fanciest Dropdown Menu You Ever Saw

What will you be building?

Contents…

1. Making a basic dropdown that works

The basic HTML

The basic CSS

The basic jQuery

2. Making the basic menu look fancy

The images

The fancy HTML: what we’ve changed

The fancy CSS: what we’ve added

The fancy jQuery: what we’ve changed

3. The final result with files

No comments:

Post a Comment

Subscribe To

About Me