| 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... | | | Mercury - Build Lightweight Web Menu Buttons And Tabs In Minutes
 | 5. Bits and Pieces | |
5.1 Shadow Effect (not applicable to tabs)
A shadow effect can be displayed by supplying an offset value and the shadow strength:
| |  | <applet code="WibbleMercuryB.class" height=100 width=150>
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="ShadowOffset" value="7">
<param name="Shadow" value="-70">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
|  |
| |
The example below shows how a button would then have a shadow below it:
 
If you do not wish to display a shadow, just set the ShadowOffset parameter value to 0:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="ShadowOffset" value="0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
The example below shows a button without a shadow:
5.2 Outline
An outline can be drawn around the outside of the button or tab face. To do this, you need to switch the outline on by setting the Outline parameter value to 1, and specifying the color of the outline:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Outline" value="1">
<param name="OutlineColor" value="000000">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
The example below shows a button with a black outline:
One of the main advantages of using an outline is that an anti-alias effect will take place on the outline. Without an outline, the edge of the button face may look jagged:
An outline, however, is partially merged with the background. This makes the outline less jagged and more pleasing to look at:
If you decide not to use an outline, just set the Outline parameter value to 0:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Outline" value="0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
The example below shows a button with no outline:
5.3 Orientation (not applicable to tabs)
The buttons can be arranged either horizontally or vertically. The Orientation parameter can either be set to 0 (vertical) or 1 (horizontal).
If you wish to stack your buttons vertically, use the following parameter:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Orientation" value="0">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
The buttons will then be displayed like this:
If you wish to lay your buttons vertically, us the following parameter:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Orientation" value="1">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
The buttons will then be displayed like this:
Additionally, the Spacing and Stagger parameters can be used to vary the position of the buttons.
5.4 Spacing
The Spacing parameter is used to determine the pixel distance between buttons or tabs.
For example, a value of 0 would be entered like this:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Spacing" value="0">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
And the buttons would be displayed close together:
If you wanted the buttons or tabs to be spaced apart, however, you could use a small pixel value like this:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Spacing" value="2">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
And the buttons would be separated apart:
Additionally, the Orientation (ButtonMenu only) and Stagger parameters can be used to vary positions.
5.5 Stagger Offset (not applicable to tabs)
The Stagger parameter can be used to offset each button away from the previous one.
For example, if you wanted the buttons to wander off to the right by - say - 5 pixels, you could use the following Stagger value:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Stagger" value="5">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
The buttons would then slope like this:
Or you could slope them to the left:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Stagger" value="-5">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
And they'd look like this:
To align the buttons together, either don't specify the Stagger parameter at all, or use a 0 Stagger value:
| | | <applet code="WibbleMercury.class" height=100 width=150>
<param name="Stagger" value="0">
<param name="NormalColor1" value="6080A0">
<param name="HighlightColor1" value="80a0d0">
<param name="Text_1" value="Test">
<param name="Page_1" value="http://www.wibbleware.com">
<param name="Text_2" value="Test">
<param name="Page_2" value="http://www.wibbleware.com">
<param name="Text_3" value="Test">
<param name="Page_3" value="http://www.wibbleware.com">
<b>This page requires a java-capable browser</b>
</applet>
| |
| |
That will line the buttons together like this:
Additionally, the Orientation (ButtonMenu only) and Spacing parameters can be used to vary the positions.
| |
| 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... | |
