Click for channel menu options
A Communication Channel page
... our resource covering a wide range of evangelism issues
View entire listing here or use left-hand subject menu.

Free: articles are freely available to republish or adapt for print media, and can be syndicated into websites using a simple insert code.

Pure CSS flyout menus, and repositioning them

Suckerfish and other CSS variants

All computer users are familiar with flyout or drop-down menus, because these are used by most operating systems and programs to offer links grouped by subject, which would be be overwhelming if all visible at the same time. Many websites also offer this familiar intuitive means of navigation, if they have more than a small number of pages or topic areas.

Pure CSS flyout/dropdown menus are usually the best option for websites. The only other realistic alternative is DHMTL (a complex mixture of CSS and Javascript), but this is dependent on users having Javascript enabled in their browsers. About 5% inexplicably do not, and therefore a DHTML menu will not work for them. However, DHTML may sometimes achieve effects which are impossible with CSS alone, but you will need a compelling reason to deploy a menu which makes your site virtuall unusable to perhaps 5% of visitors. Javascript add-ons can also enhance pure CSS menus in such a way that they remain functional without Javascript, and this is probably the best route if you need extra effects that CSS alone cannot create. (Though advanced CSS can offer functionality that was once thought to only be possible with Javascript.)

Basic principle: HTML unordered list

Pure CSS menus usually work on the simple principle that the CSS hover property can be used to make an invisible HTML <li> list link, embedded within another list item, suddenly flyout visibly on mouseover. Many designers have created different versions of these menus, but all are based on the same basic embedded list structure. All variations in appearance are controlled by CSS, which sets the size, color and horizontal or vertical layout. One of the most common variants is called Suckerfish, which this site uses. Google will quickly find many examples of Suckerfish coding.

To style a CSS menu to your requirements, it helps to understand some of the principles of CSS, so that you can do hand-coding within a text editor. You can also use online code generators such as PixoPoint [] and PureCSSMenu [], or downloadable programs such as Software.Informer [], to enter your own style requirements to create some ready-made code. The Web Developer Toolbar for Firefox is a wonderful help in tweaking CSS code, as you can experiment on the fly within your browser and see immediately the effect of a small code change.

Some wonderfully imaginative examples of pure CSS menus are available from innovative designer Stu Nicholl’s CSSPlay. [] One user has described his site as ‘like a candy store’. His menus are quite remarkable: take time to browse the wide range of achievable styles. Nicholls is a master craftsman in many areas of CSS.

The IE6 problem

Earlier versions of IE6 do not handle pure CSS menus and require an ‘htc’ Javascript to force the flyouts to work. (Stu Nicholls has developed menus that work in IE6 without Javascript, including one using ‘definition lists’ rather than unordered list HTML.) Even at the end of 2009, a surprising number of people still browsed the Web with IE6, estimated at around 20%, though sites aimed at web-savvy users will of course receive a lower total of IE6 users. This percentage is not likely to recede into insignificance any time soon, so websites still need to be enabled for IE6. For testing, try to access an old computer with IE6 installed.

Repositioning a flyout menu

If a site has a left-margin flyout menu (as on this page) which includes a number of links or a third level of flyout submenus, a problem is that the flyouts may be partly covered by the bottom of the screen when they appear. However, there is an easy Javascript solution which works in almost all browser versions including IE6 (in which it also functions as a replacement for an ‘htc’ file). It repositions a second- or third-level flyout so that it remains entirely visible above the bottom of the screen.

You need to add onMouseover="reposition(this.parentNode);" within each link to a flyout submenu; and copy the Javascript below into your page head or preferably called up as a remote Javascript file. The only customization of the code needed is the name of the CSS div ID which also contains the menu coding itself – in this example shown as menuwrapper. You may need to adjust the em value and viewport height shown just before "px" for your own requirements.

then copy/paste this code into your page head, or a separate Javascript file:

Grateful thanks to Matt at the very helpful webmaster resource site [] for pointing us to this code. If you need two separate menus on the same page, within different div IDs (as this page has), modify the script to insert the second div, as you can see in the Javascript submenudouble.js in the source code of the head of this page.

Our page menu also employs an extra level of CSS hover: a balloon information tooltip for each link. This is achieved with a hover of an embedded <span> within each link anchor text, plus a ‘clamshell’ expansion of the tooltip balloon for longer tooltip explanations or larger font settings in users’ browsers.

More webmaster resources

Read more Firefox iconrelated pages within the Websites that work menu links
book graphicrecommended books on web design, including free downloads
WMPlayer iconvaluable online videos about web ministry
Home > Guide Network > Webmaster < You are here   
Worldwide total of web users: info icon More stats: World | Social networking

Link here  Blog this/add to newsletters     Bookmark and Share Evangelism Day
Add to
your site?
Printed from Internet Evangelism Day © Oct 2016
Can be freely reproduced in print with attribution to
Oops, Evangelism Day page formatting error! Click here to restore.
FREE communication ebooks

How Internet Evangelism Day can help YOUR church

Free newsletter
Please can you...
Please share this page or about IE Day on
– ready-made wording about this page
Link  Blog