Web Design Tutorials: Photoshop, HTML, Flash, PHP

HTML Tutorial – Create The Fanciest Dropdown Menu You Ever Saw

Posted on Aug 21st, 2009 in HTML Tutorials | 0 comments
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.

01.<ul class="tabs">
02.<li><a href="#">Dropdown 1</a>
03.<ul class="dropdown">
04.<li><a href="#">Menu item 1</a>
05.<ul class="dropdown">
06.<li><a href="#">Submenu item 1</a></li>
07.<li><a href="#">Submenu item 1</a></li>
08.<li><a href="#">Submenu item 1</a></li>
09.</ul>
10.</li>
11.<li><a href="#">Menu item 2</a></li>
12.<li><a href="#">Menu item 3</a></li>
13.<li><a href="#">Menu item 4</a></li>
14.<li><a href="#">Menu item 5</a></li>
15.<li><a href="#">Menu item 6</a></li>
16.</ul>
17.</li>
18.<li><a href="#">Dropdown 2</a>
19.<ul class="dropdown">
20.<li><a href="#">Menu item 1</a></li>
21.<li><a href="#">Menu item 2</a></li>
22.<li><a href="#">Menu item 3</a></li>
23.<li><a href="#">Menu item 4</a></li>
24.<li><a href="#">Menu item 5</a></li>
25.<li><a href="#">Menu item 6</a></li>
26.</ul>
27.</li>
28.<li><a href="#">Dropdown 3</a>
29.<ul class="dropdown">
30.<li><a href="#">Menu item 1</a></li>
31.<li><a href="#">Menu item 2</a></li>
32.<li><a href="#">Menu item 3</a></li>
33.<li><a href="#">Menu item 4</a></li>
34.<li><a href="#">Menu item 5</a></li>
35.<li><a href="#">Menu item 6</a></li>
36.</ul>
37.</li>
38.</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.

01./* tabs
02.*************************/
03.
04.ul.tabs
05.{
06.display: table;
07.margin: 0;
08.padding: 0;
09.list-style: none;
10.position: relative;
11.}
12.
13.ul.tabs li
14.{
15.margin: 0;
16.padding: 0;
17.list-style: none;
18.display: table-cell;
19.float: left;
20.position: relative;
21.}
22.
23.ul.tabs a
24.{
25.position: relative;
26.display: block;
27.}
28.
29./* dropdowns
30.*************************/
31.
32.ul.dropdown
33.{
34.margin: 0;
35.padding: 0;
36.display: block;
37.position: absolute;
38.z-index: 999;
39.top: 100%;
40.width: 250px;
41.display: none;
42.left: 0;
43.}
44.
45.ul.dropdown ul.dropdown
46.{
47.top: 0;
48.left: 95%;
49.}
50.
51.ul.dropdown li
52.{
53.margin: 0;
54.padding: 0;
55.float: none;
56.position: relative;
57.list-style: none;
58.display: block;
59.}
60.
61.ul.dropdown li a
62.{
63.display: block;
64.}

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.

01.$(function () {
02.$('.dropdown').each(function () {
03.$(this).parent().eq(0).hover(function () {
04.$('.dropdown:eq(0)', this).show();
05.}, function () {
06.$('.dropdown:eq(0)', this).hide();
07.});
08.});
09.});

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

download

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 <span> element around the main menu items
01.<div id="menu">
02.<ul class="tabs">
03.<li><h4><a href="#">In the blog »</a></h4></li>
04.<li class="hasmore"><a href="#"><span>Recent</span></a>
05.<ul class="dropdown">
06.<li><a href="#">Menu item 1</a></li>
07.<li><a href="#">Menu item 2</a></li>
08.<li><a href="#">Menu item 3</a></li>
09.<li><a href="#">Menu item 4</a></li>
10.<li><a href="#">Menu item 5</a></li>
11.<li class="last"><a href="#">Menu item 6</a></li>
12.</ul>
13.</li>
14.<li class="hasmore"><a href="#"><span>Topics</span></a>
15.<ul class="dropdown">
16.<li><a href="#">Topic 1</a></li>
17.<li><a href="#">Topic 2</a></li>
18.<li><a href="#">Topic 3</a></li>
19.<li class="last"><a href="#">Topic 4</a></li>
20.</ul>
21.</li>
22.<li><a href="#"><span><strong><img src="images/feed-icon-14x14.png" width="14" height="14" alt="RSS"> Subscribe to RSS</strong></span></a></li>
23.<li><h4><a href="#">Elsewhere »</a></h4></li>
24.<li><a href="#"><span>About</span></a></li>
25.<li class="hasmore"><a href="/about/#networks"><span>Networks</span></a>
26.<ul class="dropdown">
27.<li><a href="#">Twitter</a></li>
28.<li><a href="#">posterous</a></li>
29.<li><a href="#">SpeakerSite</a></li>
30.<li><a href="#">LinkedIn</a></li>
31.<li class="last"><a href="#">See more…</a></li>
32.</ul>
33.</li>
34.<li><a href="#"><span>Bookmarks</span></a></li>
35.</ul>
36.</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
001./* hack reset (for production, use Yahoo! reset CSS)
002.*************************/
003.
004.*
005.{
006.margin: 0;
007.padding: 0;
008.}
009.
010./* body
011.*************************/
012.
013.body
014.{
015.font: 14px/21px Georgia, serif;
016.color: #370707;
017.background: #e3d79b url(images/mainbg.jpg) left 40px repeat-x;
018.}
019.
020./* links
021.*************************/
022.
023.a:link, a:visited, a:hover, a:active
024.{
025.text-decoration: none;
026.}
027.
028./* inline elements
029.*************************/
030.
031.strong
032.{
033.font-weight: bold;
034.}
035.
036./* menu-specifc
037.*************************/
038.
039.#menu
040.{
041.position: fixed;
042.z-index: 5;
043.top: 0;
044.left: 0;
045.width: 100%;
046.height: 40px;
047.line-height: 40px;
048.background: #ffb35a url(images/topbg.gif) repeat-x;
049.border-bottom: 1px solid #000;
050.}
051.
052.#menu ul
053.{
054.margin: 0 auto;
055.}
056.
057.#menu ul li.hasmore
058.{
059.background: url(images/drophighlight.png) no-repeat center 27px;
060.}
061.
062.#menu ul li h4
063.{
064.margin: 0;
065.}
066.
067.#menu ul li h4 a
068.{
069.font-size: 14px;
070.color: #000;
071.font-weight: bold;
072.padding: 0 15px;
073.}
074.
075.#menu ul li a
076.{
077.color: #9b2021;
078.padding-left: 4px;
079.}
080.
081.#menu ul li a img
082.{
083.vertical-align: middle;
084.}
085.
086.#menu ul li a:hover
087.{
088.background: url(images/topselectionleft.png) top left no-repeat;
089.}
090.
091.#menu ul li a span
092.{
093.display: block;
094.padding: 0 15px 0 11px;
095.}
096.
097.#menu ul li a:hover span
098.{
099.background: url(images/topselectionright.png) top right;
100.}
101.
102.#menu ul.dropdown
103.{
104.padding: 10px;
105.background-image: url(images/dropdown.png);
106.overflow:hidden;
107.border-bottom: 1px solid #dc902f;
108.width: 290px;
109.}
110.
111.#menu ul.dropdown li a
112.{
113.border-bottom: 1px solid #e5cd8e;
114.line-height: 30px;
115.overflow: hidden;
116.height: 30px;
117.}
118.
119.#menu ul.dropdown li.last a
120.{
121.border-bottom-width: 0;
122.}
123.
124.#menu ul.dropdown li a:hover
125.{
126.background: url(images/menuarrow.png) no-repeat left center;
127.}
128.
129.#menu ul li h4 a:hover
130.{
131.background-image: none;
132.}

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
01.$(function () {
02.
03.$('.dropdown').each(function () {
04.$(this).parent().eq(0).hoverIntent({
05.timeout: 100,
06.over: function () {
07.var current = $('.dropdown:eq(0)', this);
08.current.slideDown(100);
09.},
10.out: function () {
11.var current = $('.dropdown:eq(0)', this);
12.current.fadeOut(200);
13.}
14.});
15.});
16.
17.$('.dropdown a').hover(function () {
18.$(this).stop(true).animate({paddingLeft: '35px'}, {speed: 100, easing: 'easeOutBack'});
19.}, function () {
20.$(this).stop(true).animate({paddingLeft: '0'}, {speed: 100, easing: 'easeOutBounce'});
21.});
22.
23.pic1 = new Image(310, 672);
24.pic1.src = "images/dropdown.png";
25.
26.pic2 = new Image(4, 40);
27.pic2.src = "images/dropselectionleft.png";
28.
29.pic3 = new Image(394, 40);
30.pic3.src = "images/dropselectionright.png";
31.
32.});
3. The final result with files

Congratulations! You’ve walked through creating the fanciest menu ever! Here are the files this menu uses:

Source: webdesigndev.com

you may also like:

Leave a Reply

Powered by WordPress | Designed by Elegant Themes