[All Adaptavist Apps]
This tutorial explains the basic structure of menus and how to create them...
The menus in
are split in to three sections:
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...
The custom menus are constructed using simple [Wiki Markup Editor], more specifically [lists] and [links].
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:
{menuitem}Home{menuitem} {menuitem}Builder{menuitem}
If you put that notation in to a page, it would look like this:
Home
Builder
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:
[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:
{menuitem}[Start|Home|Our homepage]{menuitem} {menuitem}[Adaptavist|http://adaptavist.com|Our website]{menuitem}
Which would give:
[Start]
When a linked button on the menu bar is clicked, you will be taken to the location defined by the link.
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:
{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:
[Home]
[Builder]
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] {sub-menu}[CSS Custom Styles] {menuitem}[Headings CSS]{menuitem} {menuitem}[Text Styles CSS]{menuitem} {sub-menu} {menuitem}[Installing Builder]{menuitem} {menuitem}[Menus]{menuitem} {menu}
If you put that notation in to a page, it would look like this:
[Home]
[Builder]
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!
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.