Wibbleware.com - Java™ Applets for menus, navigation and innovative solutions

This page requires a java-capable browser

Web Menus

Expand Menu Studio
Construct and maintain multi-level menus with this complete menu solution. Includes a menu editor and 50 menu design templates.

Read More...


Mercury Buttons
Dynamically build graphical web buttons and tabs in just minutes. No images required!

Read More...


Fission Menu
Quickly turn a single image into a stylish themed panel of web buttons with the minimum of effort!

Read More...

eXpand
The classic 2-level menu applet. Dynamically expand sub-menus as you move over top-level menus.

Read More...


Banners

Spotlight Banner
Create fantastic eye-catching lighting effects with the Spotlight applet.

Read More...


Security

Abstract e-mail
Abstract offers a truly simple solution to protecting e-mail addresses on your site.

Read More...
  Fission - Web Navigation Menu Panels
Fission - User Guide
3. Button Layout

3.1 Orientation
The first design decision you will need to make is the orientation of your buttons. They can either be vertically or horizontally aligned. In most cases, the shape of your image will normally dictate the type of orientation you use - a tall image will generally have vertically orientated buttons, and a wide image will generally have horizontally orientated buttons.

The orientation is set through the Orientation parameter value. This will need to be set to '0' for a vertically orientated set of buttons, or '1' for a horizontally orientated set of buttons. The following sample script is setting horizontal alignment:

 
<param name="Orientation" value="1">
<param name="Spacing" value="3">
<param name="TopMargin" value="80">
<param name="BottomMargin" value="20">
<param name="LeftMargin" value="20">
<param name="RightMargin" value="20">

 




3.2 Margins
Having decided upon your button orientation, the placement of your buttons will then rely on these four parameter values:

  TopMargin
  BottomMargin
  LeftMargin
  RightMargin

These parameters represent pixel values and they are combined together to determine your button placement. This diagram shows how they are interpreted to display a horizontal row of buttons along the base of the image:



The example above used the same value (20 pixels) for the LeftMargin, RightMargin and BottomMargin parameters. Then a much larger value (80 pixels) was used for the TopMargin parameter.

This sample script shows an example of these parameter values:

 

<param name="Orientation" value="1">
<param name="Spacing" value="3">
<param name="TopMargin" value="80">
<param name="BottomMargin" value="20">
<param name="LeftMargin" value="20">
<param name="RightMargin" value="20">


 




3.3 Spacing
The final aspect of button placement is specifying how far apart each button is. This is achieved through the Spacing parameter value.

This sample script shows an example of spacing the buttons apart by 3 pixels:

 

<param name="Orientation" value="1">
<param name="Spacing" value="3">
<param name="TopMargin" value="80">
<param name="BottomMargin" value="20">
<param name="LeftMargin" value="20">
<param name="RightMargin" value="20">

 


 
News

[April 2009]
Free!
As of today, 4th April 2009, all software on the site is completely free! And there's no more pesky AdSense to avoid either!



[March 2006]
EMS v2.4
Bundled with a GUI editor and 50 menu designs, this updated multi-level menu makes professional site navigation a breeze...

Read More...

[March 2005]
Product Updates
A number of product updates have been made...

Read More...

[April 2004]
Mercury v1.3
Two for one - Mercury can now create buttons AND tabs...

Read More...

[April 2004]
Fission v1.1
An update to Fission navigation menu, our alternative to HTML imagemaps...

Read More...

[March 2004]
Web Page Design
A beginners guide to designing web pages...

Read More...