Anatomy of Menus

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

Menu Sections

The menus in

are split in to three sections:

• Custom Pre-Menu - these menu items appear before the View and Edit menus.
• View and Edit menus - these are in-built menus that contain all of the standard
  Unknown macro: {confluence}
  navigational elements.
• Custom Post-Menu - these menu items appear after the View and Edit menus.

The standard View and Edit menus can be [partially customised], however you can't make major alterations to them. This is because they contain additional logic that enables and disables items based on the location within a [space] (eg. you can't add comments to the site map) and the privileges of the logged in user.

The custom pre- and -post menus, however are completely customisable and we'll cover the basics of defining menus in the remainder of this tutorial...

Custom Menus

The custom menus are constructed using simple [Wiki Notation], more specifically [lists] and [links].

Buttons on the Menu Bar

The structure of a menus is defined using an unordered bullet list and the hyperlinks in a menu are defined using, somewhat obviously, links.

Here's a quick example:

* Home
* Builder

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

• Home
• Builder

You can link these buttons to pages by turning them in to links:

* [Home]
* [Builder]

Which results in:

• [Home]
• [Builder]

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:

* [Start|Home|Our homepage]
* [Adaptavist|http://adaptavist.com|Our website]

Which would give:

• [Start]
• Adaptavist

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 increase the indentation of items that you want to move from the menu bar to the pop-up menu:

* [Home]
* [Builder]
** [CSS Custom Styles]
** [Installing Builder]
** [Menus]

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

• [Home]
• [Builder]
  • CSS Custom Styles
  • Installing Builder
  • Menus

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:

* [Home]
* [Builder]
** [CSS Custom Styles]
*** [Headings CSS]
*** [Text Styles CSS]
** [Installing Builder]
** [Menus]

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

• [Home]
• [Builder]
  • CSS Custom Styles
    • Headings CSS
    • Text Styles CSS
  • Installing Builder
  • Menus

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 Notation], 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 Notation] for a horizontal rule:

* [Home]
* ----
* [Builder]

By simply adding an item with four hyphens - you create a spacer bar. You can add spacers in both the menu bar, pop-up menus and sub-menus.