RWExtras

Simpler webdev, one stack at a time…

RWExtras

Simpler webdev, one stack at a time…

RWExtras

Simpler webdev, one stack at a time…

RWExtras

Simpler webdev, one stack at a time…

Flex Menu HTML Stack Tutorial

In this brief tutorial, we'll show you how to set up a navigation menu using the Flex Menu HTML stack, including Tooltips (available separately).
The first thing you need to do is add a Stacks page to your project and then drop the Flex Menu HTML Stack. Your page should look something like this:

RapidWeaverScreenSnapz011

This example will include 3 buttons therefore the default # of Buttons will do. Next, drop a Flex Menu HTML Button stack in each drop area to get this:

RapidWeaverScreenSnapz020

RapidWeaverScreenSnapz013

From here, open the stack's Info Box (HUD) to modify the settings as described in the Flex Menu HTML info page to set up your menu. Here's a screenshot on the left.
To complete the navigation menu, we changed the HUD for the buttons as follows:
  • Button1 to: 'Demo 1', gave it a position of 'left', the link was set at '#' (stays on the current page), the title was set to 'Tooltip|Simple tooltip here...', the Class is 'tooltip', and unchecked Current
  • Button2 to: 'Demo 2', gave it a position of 'middle', the link was set at '#' (stays on the current page), the title was set to 'Tooltip|Simple tooltip here...', the Class is 'tooltip', and checked Current
  • Button3 to: 'Demo 3', gave it a position of 'right', the link was set at '../tooltips/index.html' (links to Tooltips page), the title was set to 'Tooltip|Click to visit Tooltips page...', the Class is 'tooltip', and unchecked Current
Here's a sample screenshot for one of the buttons in this menu (middle button):

RapidWeaverScreenSnapz014

Finally, drop the Tooltips Stack on the page and set it up following the info provided in the Tooltips info page.

OK, let's see what our example looks like. Just hover over the buttons...