[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 Notation], 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:
* Home * Builder
If you put that notation in to a page, it would look like this:
You can link these buttons to pages by turning them in to links:
* [Home] * [Builder]
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:
* [Start|Home|Our homepage] * [Adaptavist|http://adaptavist.com|Our website]
Which would give:
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:
* [Home] * [Builder] ** [CSS Custom Styles] ** [Installing Builder] ** [Menus]
If you put that notation in to a page, it would look like this:
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:
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.
You can increase the indentation still further to add sub-menus to sub-menus and so on.