Basics
This tutorial illustrates how to code CSS (Cascading Style Sheets) and HTML (Hyper Text Markup Language) to create a multi-level horizontal dropdown menu (navigation bar) like that above on this web site. There is a similar tutorial for the vertical navigation bar on the left. Since there are some complexities that arise when combining both a horizontal and vertical menu on the same page, you should go through this horizontal tutorial first since it leads nicely into the vertical tutorial.
This is not a tutorial to teach CSS or HTML coding. It assumes that you're already familiar with, and somewhat experienced in, both. You should also know how to:
- set up <meta>, <title> and other tags in the <head> of an HTML document
- link style sheets and JavaScript files into the <head>
- set up CSS styles, and understand how styles cascade
You should also be aware of W3C, the World Wide Web Consortium, the keeper of the flame for CSS and HTML.
Browser compatibility
It's a sad fact that web users, like most people, do not upgrade regularly. Back when Internet Explorer (IE) was dominant, it was far from standards compliant, and upgrading frequently meant a user had to deal with a whole new set of quirks. IE did not conform well to internet standards until version 8, and as of this writing (June 2012) IE, Firefox, Chrome and Safari are all almost fully compliant, "almost" only because it's likely there are a few minor compliance issues that remain in so complex a standard. However, people still don't upgrade. To see what is being used, and for some interesting and up-to-date statistics, visit the W3Counter web site, or the browser statistics page at W3Schools.
Right now this code supports and is tested in the following:
- IE 6-latest:
- Safari (latest)
- Chrome (latest)
- Firefox 4-latest: some compliance issues for versions < 4
The C in CSS
Don't forget the cascade. The concept of cascading styles is enormously powerful. It means a coder doesn't have to define every aspect of a tag in every rule, which would bloat the heck out of web pages and slow them down enormously. But the cascade frequently means that the order in which rules are defined in a style sheet is critically important. So if you change the order of the rules in a style sheet, don't be surprised if the functionality and appearance of these menus change as well.
Getting the code
There will be code snippets here and there in this tutorial. If you need to download something, a specific link will be provided for the download. On the other hand, with the exception of CSS style sheets and JavaScript source code, unless specifically stated otherwise, the example pages in this tutorial are self-contained, with the CSS coded in the document header. So to get the source code, right-click on some text anywhere on the example page (not on an image or hyperlink) and select View Source for IE or Safari, or View Page Source for Firefox or Chrome. That will open a separate window displaying the HTML source, and you can copy-and-paste from there.
When you're done with the sample page, hit the "back" button on your browser to return to your place in the tutorial.
Best practices: default.css
Since all of the browsers (IE, Firefox, Chrome, Safari, etc.) exhibit different default formatting behavior for many of the standard HTML tags, W3C recommends the use of a default style sheet. By linking it into every page on your web site as the first style sheet, you override the default styles in the browsers for all of the standard HTML 4 tags, producing a set of styles that are consistent across browsers. You can then use subsequent style sheets, or styles defined in the <head> after the default.css link, to override any formatting you wish. But by specifically defining the default styles, you create consistency across browsers if you happen to use a tag for which you haven't specifically defined a style.
If you want a copy of the default styles recommended by W3C go here.
This site uses a slightly modified version, which you can download here.
Best practices: a bunch of <div>'s
To begin we create a simple web page with a number of <div> tags. The page has been carefully divided into appropriate sections. For this tutorial the <div>'s employ a rather garish and unattractive combination of background colors, and some effort has been made to make sure each element has a unique color. In this way, when an element that is supposed to be hidden behind another element has some portion that is visible, it can be seen clearly. This is immeasurably helpful when trying to identify margin collisions, float issues or other unwanted aspects of elements that inherit something unanticipated in the cascade. You can view the basic page, and copy the source code, here.
It's pretty ugly, huh?
Next
Time to create the menus