Anatomy of Menus

This tutorial explains the basic structure of menus and how to create them...

Custom Menus

The custom menus are constructed using simple a number of utility macros which assist in the creation of dynamic menus. It is also possible to create menus using unordered lists.

Buttons on the Menu Bar

The structure of a menus is defined using a {menuitem} macro containing a link

Here's a quick example:

{menuitem}Home{menuitem}
{menuitem}Builder{menuitem}

If you put that notation in to a page, it would look like this:

You will notice that nothing is displayed, this is because if a menuitem does not contain a link, it is ignored and removed from the menu. You can make these buttons appear by turning them in to links:

{menuitem}[Home]{menuitem}
{menuitem}[Builder]{menuitem}

Which results in:

It should be noted that you can use any type of [link] and also have a different on-screen caption and tooltip if desired, for example:

{menuitem}[Start|Home|Our homepage]{menuitem}
{menuitem}[Adaptavist|http://adaptavist.com|Our website]{menuitem}

Which would give:

When a linked button on the menu bar is clicked, you will be taken to the location defined by the link.

Pop-Up Menus

As you'll see from the menu bar buttons at the top of this page, most of them display a pop-up menu when the mouse moves over them. To do this, simply encase the menu items that you want to move from the menu bar to the pop-up menu in a menu macro:

{menuitem}[Home]{menuitem}
{menu}[Builder]
  {menuitem}[CSS Custom Styles]{menuitem}
  {menuitem}[Installing Builder]{menuitem}
  {menuitem}[Menus]{menuitem}
{menu}

If you put that notation in to a page, it would look like this:

Sub-Menus

Just as you increase the indentation to move items from the menu bar to the pop-up menu, you can increase it still further to create sub-menus:

{menuitem}[Home]{menuitem}
{menu}[Builder]
  {submenu}[CSS Custom Styles]
    {menuitem}[Headings CSS]{menuitem}
    {menuitem}[Text Styles CSS]{menuitem}
  {submenu}
  {menuitem}[Installing Builder]{menuitem}
  {menuitem}[Menus]{menuitem}
{menu}

If you put that notation in to a page, it would look like this:

The Headings CSS and Text Styles CSS items will now appear on a sub-menu that gets displayed when the mouse is over the CSS Custom Styles menu item.

You can increase the indentation still further to add sub-menus to sub-menus and so on.

If you don't like typing all the [Wiki Markup Editor], you might consider using Automated Menu Creation and let macros do all the work for you!

Menu Spacers

You will have noticed that the menus at the top of this page have spacer bars in them - to create a spacer bar, just use the [Wiki Markup Editor] for a horizontal rule:

{menuitem}[Home]{menuitem}
{menuseparator}
{menuitem}[Builder]{menuitem}

You can add spacers in both the menu bar, pop-up menus and sub-menus.