• LEVEL ONE A

  • LEVEL TWO A » 
    • Level Three A
    • Level Three B
    • Level Three C
  • Level Two B

• LEVEL ONE B

  • Level Two A
  • Level Two B

• LEVEL ONE C

  • LEVEL TWO » 
    • Level Three A
    • Level Three B
    • Level Three C
  • Level Two A
  • Level Two B

• LEVEL ONE D

  • Level Two A
  • Level Two B

Menu Example

Several people have written me about the menu system I use on this site and how to customize it for their own. This page is a bare-bones example to help you understand how it is structured. I only use three levels but you can add more.

This menu system is not my original work. I adapted the menu system I found at the Tanfa design site.

Of all the CSS drop-down menu systems I've seen I have found that this one seems the best.

• No javascript in modern browsers (IE7+), just pure CSS
• It's easily modified
• It's flexible
• There are both horizontal and vertical versions at Tanfa
• It works in all major browsers (IE6 does require some conditional comments and javascript - See source code of this page and the note below)
• It doesn't break when using either text zoom or page zoom

This page uses the following files. The CSS files are linked to in the header of the page. The menu and footer are added using the PHP "include" function.

• /styles/default.css - The default CSS style sheet for the site
• /styles/menu_example.css - The CSS style sheet for the menu on this page (the rest of the site uses menu.css)
• /styles/print.css - A CSS style sheet for clean printing
• /styles/menu_example.txt - The actual content of the menu on this page. It is brought into the page using the PHP "include" function (The rest of the site uses menu.txt)
• /styles/footer.txt - This page's and site's standard footer brought in using PHP "include"
• /menu_example.php.txt - Use this link to see the raw .php source file of this page you are currently viewing. It will display in plain-text so you can see the bare code before the server parses it and serves it as what you see here. If you view the source of this currently visible page you'll see the parsed code, including all the "included" text. So, view this link to see the original un-parsed source of this page you are now viewing. That will show you how the HTML and the PHP includes are structured.

Because the menu content is in a separate file that is "included" using PHP, I can change that one file and every page on my site automatically has the same updated menu. For instance, I added a link to this page in the menu.txt file. Now every page you go to on my site has that updated menu. The same is true of the footer on every page.

Likewise, using external style sheets means that when I change those files every page on the site is similarly updated. For example, if I want to change the page background I don't have to change every page, I just change the one default.css file.

IE6 - IE6 does require javascript for the menu to work. It uses a csshover.htc file in conjunction with IE conditional comments. You can see the conditional comments by viewing the source for this page. Here's the link to the file I use.

Here's a link to the Tanfa page.

NOTE - If you're going to customize these files for use on your own site, take heed of the following:

• Be careful to check the menu's functionality after EVERY edit you make to these example files!!!
• Use a good text editor with a good undo feature.
• In the original Tanfa design all levels are styled the same. In my version I have chosen to style the first-level buttons differently. Hence, I can't use them as links because the <a> link styling affects all items that are links. I suppose one could separate out the CSS for the first-level buttons but it hasn't been an issue for me so I haven't invested the time to do it.