CSS Express Drop-Down Menus
What in the world is a CSS Express Drop-Down menu? Simply stated, CSS Express Menus are a PVII solution that will help you produce a quick (express) CSS drop-down menu without some of the limitations found in some other "pure" CSS menus. What the heck is a pure CSS menu? Pure CSS menus use the hover pseudoclass, on the LI tag, to hide and show drop-down menus without JavaScript. Sounds great in theory, but in practice it's not so pure. Browsers used by the vast majority of humans do not support this technique and must be served a small script to simulate li:hover. That said, please do take a look at a finished CSS Express menu example - then let's meet back here at the next paragraph.
Tutorial skill level
This tutorial requires a beginner-to-intermediate proficiency level in basic CSS syntax and markup fundamentals. If you follow each step, you will have a working menu.
When to use it and when not to use it
CSS Express menus (or any other "Pure" CSS Menu) should only be used in a horizontal orientation with a single drop-down level. Attempting to use this type of menu with additional flyout levels will create serious usability problems because of CSS's one-dimensional capabilities.
When to step up to a full-featured menu system
If you need multiple flyouts or a vertically oriented menu, then you need to be using a fully-featured and automated menu system like Pop Menu Magic (PMM), which is designed to be used (and usable) in a multi-level scenario. PMM is carefully programmed to allow a person to move his pointing device diagonally, without the entire menu snapping shut. PMM also contains automatic features to highlight the current page link, to reposition a sub-menu if it detects that there is not enough space to fully display it - and much more. All-in-all, PMM is simply the best menu-building system for Dreamweaver users - bar none - with a totally automated user interface in which to manage all aspects of your menu code.
movie: inserting a Pop Menu Magic menu
Now back to CSS Express...
Creating a CSS Express Drop-Down Menu
The process is straightforward. We'll create a new document, write the menu markup (the HTML code), plug in the CSS Express style sheet and link up the wee little CSS Express JavaScript file.
HTML or xhtml?
Doesn't matter to us. The menu will work either way. For the purposes of this exercise, we'll use HTML 4.01 transitional.
Do I need Dreamweaver to follow this tutorial?
In a word - no.
Download the vital assets
Download the p7exp folder. Create a new folder in the root of your local site and name it p7_cssexpress. Unzip the archive, and move the unzipped p7exp folder inside the p7_cssexpress folder . The p7exp folder inside the zip archive contains a CSS file, a JavaScript file, an images folder that holds four background images used for the menu, and an editable Fireworks image.
Write the base markup
Create a blank document in the root of your new p7_cssexpress folder by entering this code:
Note: If you are using Dreamweaver or a similar editor, a new document will contain default markup. You can start with that default markup, if you wish, but do make sure your new document has a DOCTYPE (the first two lines in the code snippet below).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>PVII CSS Express Drop-Down Menu</title> </head> <body> </body> </html>
Link the CSS, Link the JavaScript, and add fixes for MSIE
On the blank line between the page title and the closing </head> tag, place this code:
<link href="p7exp/p7exp.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="p7exp/p7exp.js"></script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #p7menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->
The IE fixes are carried in a Conditional Comment, a special proprietary block of code that is read only by the versions of IE Windows listed in the opening comment. In this case, we are targeting versions less than or equal to (lte) IE7. The workarounds will be read, therefore, by all versions from 5.0 to 7.99. The first rule gives the menu container and all links in the menu layout properties, enabling them to display and behave properly. The second rule fixes the a:active selector, allowing us to provide tab key support.
Initialize the script
We need to tell the script to run. The easiest way to do that is with an onLoad call in the body tag. Find your document's opening <body> tag and enter this code:
<body onLoad="P7_ExpMenu()">
Why do we use body onload to initialize the menu script?
We missed Church the day of the unobtrusive JavaScript sermon. We're joking, of course... so depending on your personal preference, please feel free to replace the body onload with a window.onload in the script file. But be sure you know how to do it - especially if there are other scripts running on your page!
Write the menu markup
Place your cursor on the blank line between the opening and closing body tags and enter this code:
<div id="menuwrapper"> <ul id="p7menubar"> <li><a href="#">Home</a></li> <li><a class="trigger" href="#">Trigger One</a> <ul> <li><a href="#">Sub 1.1</a></li> <li><a href="#">Sub 1.2</a></li> <li><a href="#">Sub 1.3</a></li> <li><a href="#">Sub 1.4</a></li> </ul> </li> <li><a class="trigger" href="#">Trigger Two</a> <ul> <li><a href="#">Sub 2.1</a></li> <li><a href="#">Sub 2.2</a></li> <li><a href="#">Sub 2.3</a></li> <li><a href="#">Sub 2.4</a></li> <li><a href="#">Sub 2.5</a></li> </ul> </li> <li><a class="trigger" href="#">Trigger Three</a> <ul> <li><a href="#">Sub 3.1</a></li> <li><a href="#">Sub 3.2</a></li> <li><a href="#">Sub 3.3</a></li> <li><a href="#">Sub 3.4</a></li> <li><a href="#">Sub 3.5</a></li> <li><a href="#">Sub 3.6</a></li> <li><a href="#">Sub 3.7</a></li> <li><a href="#">Sub 3.8</a></li> </ul> </li> </ul> <br class="clearit"> </div>
Use a CSS class to assign an arrow
Note that the menu is a single, nested unordered list. Each link that acts as a trigger to show a sub-menu is assigned a class="trigger". The trigger class sets a downward-pointing arrow as a background image, indicating that a sub-menu is available. The code looks like this:
<li><a class="trigger" href="#">Trigger One</a>
Clearing the menu float
The root menu items are floated left. That's how we get an ordinary list to display horizontally. In order for the menu's containing DIV to fully display, we must clear the floats. To do this, we place a <br> with class="clearit" on a line between the end of the menu list and the containing element's closing </div> tag. The code looks like this:
</ul> <br class="clearit"> </div>
That's a wrap...
You should have a working menu, which looks like this:
Browser support
Browser support, includes, but is not limited to:
- IE5.x - Windows and Mac
- IE6.x - Windows
- Opera 8 and higher - Windows
- Opera 9 and higher - OS X
- Safari 1.2 and higher - OS X
- Firefox 1.0 and higher - Windows and OS X
- Mozilla/Gecko 1.0 and higher - Windows and OS X
Editing Styles
The p7exp CSS file you downloaded is liberally commented. We urge you to open it and read it to gain additional insight into how the menu is structured, how it operates, and how to change style attributes.
How do I add more menu items?
The menu is an unordered list. Simply add new LI elements as necessary. If you do not know how to write list markup, and are using Dreamweaver, you will need to temporarily disable the menu style sheet. That will cause Dreamweaver to render the menu as an unstyled bulleted list and allow you to use Dreamweaver's visual tools to add, delete, or change the hierarchy of the menu items. To disable styles in Dreamweaver 8 (or later), choose View: Style Rendering. Clear the check in front of Display Styles. Reverse this procedure when you are done editing to turn CSS rendering back on.
Can I add more sub-menu levels?
Yes. You can add additional CSS selectors to support flyouts from your drop-downs. However, since this will cause your menu to become hard to use and inaccessible to keyboard users, we do not support it. If you need a multi-level menu, you will need to use a fully-featured system such as Pop Menu Magic.
Can CSS Express Menus and Pop Menu Magic be used on the same page?
Yes. CSS Express Menus can co-exist on the same page as any PVII menu system.
Discuss this tutorial
If you'd like to offer comments or discuss this tutorial, kindly log on to our public newsgroups. They are hosted on our private NNTP (news) server: forums.projectseven.com. If you are not sure how to access a private newsgroup, please see our main support page.