Dan Fergus Design > Student Resources > Syllabus > Class Schedule >Drop-Down Menus

VCB328 Advanced Web Design

Exercise: Drop-Down Menus

Drop-down menus (sometimes called pop-up or pull-down menus) are popular on web sites that have a lot of pages for their ability to save spaces: dozens of links can be squeezed into a narrow horizontal (or in rare cases vertical) space that would normally contain only five or six or so. Unfortunately, drop-downs have their disadvantages too—javascript-based menus tend to be complicated, hard to edit and won't function on browsers with javascript disabled; those that use only CSS are much simpler, but they won't work when viewed with Explorer for Windows (which, unfortuantely is the most popular browser on the planet. Did I mention the Explorer sucks?).

In this exercise we will create a purely CSS drop-down (Explorer be damned!) and then we'll use Dreamweaver to help us create a javascript version. The finished result will look like this:

Part One: CSS Only Drop-Down Tabs

1. Open a new HTML document and save it as "cssDropDown.html" or something similar. I'd recomend put the file in a folder called something like "dropDownMenus" in your documents folder.
2. Create a menu of links. The key here is to make each mani link its own separate list <ul>. Sub-menus (those that will drop down) should also be separate lists, placed inside the list item (before the closing </li> tag) for each of the main categories. Surround the entire group of lists with a <div> tag named "menu." You can use the following markup to save time:

<div id="menu">

<ul>
<li>
<a href="#" class="main">Category 1</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>

<ul>
<li>
<a href="#" class="main">Category 2</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
</ul>

<ul>
<li>
<a href="#" class="main">Category 3</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>

<ul>
<li>
<a href="#" class="main">Category 4</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#" class="main">Category 5</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
</ul>

</div>

3. Now add the CSS:

#menu {
width: 100%
}

#menu ul {
list-style:none;
margin:0;
padding:0;
width:8em;
float:left;
}

#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: .8em;
display: block;
border-width: 1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color:#000000;
background:#fff;
}

#menu a {
color:#000;
background-color:#ccc;
text-decoration: none;
}

#menu a.main {
color:#000;
background-color:#eee;
text-decoration: none;
}

#menu a:hover {
color:#fff;
background-color:#333;
}

#menu li {
position: relative;
width:100%;
}

#menu ul ul {
position: absolute;
z-index: 500;
width: 100%;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {
display:none;
}

div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
display:block;
}

If you wish to use images (tabs for example) in place of the categories above, add an id="somename" to each of the main <ul> tags, then add a background-image in the CSS. For example, the first category would become:

<ul id="category1" >
<li>
<a href="#" class="main"><span class="noShow">Category 1</span></a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>

The CSS becomes more complex, for you'll need to create separate <a> styles for each category. You should also specify the width and height of the tab in the <a> tag so it fits the image. And you'll have to create a style that hides the Category 1 list item. As a bonus, you can combine this with the rollover tab code to create image that changes when rolled-over:

#menu #category1 a.main {
color:#000;
background-color:#eee;
text-decoration: none;
background-image: url(yourPicture.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 150px;
height: 24px;
padding:0;
}

#menu #category1 a.main:hover {
color:#fff;
background-color:#333;
text-decoration: none;
background-image: url(yourPicture.gif);
background-repeat: no-repeat;
background-position: 0px -30px;
width: 150px;
height: 24px;
padding:0;
}

.noShow {
display:none;
}

Below I've replaced the first tab with an image and hidden the list text:

 

Of course, none of this will work with Explorer, so we need to use a different method...

Click here to continue with Part Two: Using Dreamweaver to Create Drop-Down Menus.

Class schedule

Syllabus

Student resource index