- Channel topics
- Finding faithHow people become Christians
- Effective communicationApproaches for biblical communication
- Bridge the gapMeeting people on the common ground of their interests & needs
- Bridging opportunitiesExamples and opportunities for using the Bridge Strategy
- Using cultureTypes of culture; understanding & using culture in evangelism
- Websites that workIssues for site planning, usability and promotion
- Problems in evangelismThings that stop us being effective
- Mission opportunitiesDigital evangelism & cross-cultural mission, mission & literature resources
- Writing wellHow to write effectively for the web or print media
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.
Basic principle: HTML unordered listPure 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.
You need to add
onMouseover="reposition(this.parentNode);" within each link
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
for your own requirements.
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
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
each link anchor text, plus a ‘clamshell’ expansion of the tooltip balloon for
longer tooltip explanations or larger font settings in users’ browsers.
related pages within the Websites that work menu links
recommended books on web design, including free downloads
valuable online videos about web ministry