FSeTop CSS menu

FSeTop CSS menu using Unordered Lists

Topic creation date:2008-06-11

Menus using only CSS (Javascript free!)

Javascript is disabled in about 10% of browsers mostly for (very good) security reasons. See the CERT advisory from February in 2000 on malicious HTML tags (specifically the part about 'Web Users Should Disable Scripting Languages in Their Browsers') and an update from February 2008 describing how to go about Securing Your Web Browser. Since we generally want to maximise our viewing potential Javascript should not be used on websites. Where it really absolutely has to be used, its functionally should degrade gracefully. This is very hard to do with something like a menu. However, we can do this with CSS, and have it degrade into an unordered list in the event that the user doesn't have a CSS enabled browser. While a CSS menu has its weaknesses too, for example it is hard to maintain support across all browsers and the mouse must remain on the menu when drilling down, a CSS menu is cleaner and faster than a Javascript menu. Most importantly, a CSS menu will work without scripting being enabled.

The menu used on this web site is a combination of some fairly extensive CSS and a fairly simple HTML ordered list using <ul> and <li> elements as detailed in the list part of the HTML4.1 specification at the World Wide Web Consortium (W3C).

The original idea of this was inspired by Eric Meyer's pure CSS popups. The actual implementation was heavily inspired by and mostly drawn from GRC's Script-Free Pure-CSS Menuing System.

The HTML for the menu part looks like this.

<div class="menu">

<ul class="toplevel">

<li><a class="menubutton" href="./home.html">&nbsp; Netwiz Home &nbsp;<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table><tr><td><![endif]-->

<ul class="downlevel">

<li><a href="./home.html"><span class="drop"><span>Netwiz Pty Ltd Home Page</span>&nbsp;</span></a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a class="menubutton" href="./montel.html">&nbsp; MonTel &nbsp;<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table><tr><td><![endif]-->

<ul class="downlevel">

<li><a href="./montel.html"><span class="drop"><span>MonTel Call accounting System</span>&nbsp;</span></a></li>

<li><a href="./appnotes/appnotes.html"><span class="drop"><span>MonTel Application Notes</span>&nbsp;</span></a></li>

<li><a href="./montelw.html"><span class="drop"><span>What is MonTel?</span>&nbsp;</span></a></li>

It is generated automatically by Fsetop, and replaces the <menu> marker in the template HTML file. The <!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table><tr><td><![endif]--> part is required to allow Microsoft Explorer 5.5 and 6 to use tables to be able to display the rollover. The complexity is in being able to allow IR 7 and greater (though at the time this was written IE8 beta was broken) to work.

In the event you don't need this and just want a plain ordered list, you can select these extras out with some command line switches.

The following is the CSS at the time of publication to generate the above menu. The assumption is that you have some sort of banner which you have set to a height of top:10.5em; with a font size of 1.2em. This can all be changed of course. The CSS code below in placed in the public domain. The images are not, though, it would be sensible in any event to change the look and feel.

The menu as is has been tested and shown to work in the following browsers:

• Internet Explorer 5.5
• Internet Explorer 6
• Internet Explorer 7
• Opera 9.2
• Safari 3.3.1
• FireFox 1.5
• FireFox 2.0
• FireFox 3.0

The following are known to fail in some fashion:

• Opera 7.x (One would expect most Opera users to be using the very latest version)
• Internet Explorer 8 Beta 2 (Using the selector for IE6 will fix this - however since Microsoft may fix the problem before release this web site will not address the issue until IE8 is released).
• Konqueror 3.5.5 can be made to work by removing the comments on the two line that otherwise begin with 'html:not(:nth-child(1))'. The code will not be valid CSS according to the W3C, but should still work correctly in all supported browsers as well as Konqueror 3.5.5 .

Here are the two CSS files (uncompressed) use to generate this page:

This one does the menuing and the basic page layout: main.css.

This one is a heavy variation of the AuthorIt generated stylesheet.css with redundancies removed and changes made here for look and feel rather than in AuthorIt: authorit.css.

See Also Frame Sets for topics (FSetop)