Menu Basics

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.