About Menus

Menus in Web Pages CMS are widgets. That means that they can be created once and reused across the site by any page that is in the layer that the menu widget is placed in. Menus are rendered as unordered lists (ul elements), which by default use bullet points to denote each list item and render vertically. The default theme includes a style sheet that removes the bullet points and also provides for horizontal display of menu items. A default menu is provided which is called "Main Menu".

Creating a new menu

Menus can be created from the Create Menu link on the admin navigation. All menus require a name.

Add menu name

Unless otherwise specified this will be used as a CSS class name for the menu. The class name is applied to the ul tag. For example, the default menu is rendered as follows:

<ul class="main-menu">
​    <li>...</li>
<ul>

You can provide any value for the class name so long as it can be used as a valid CSS class (no spaces, cannot start with a number and should consist of alphanumeric characters only). 

Add Css class

Finally you must specify the orientation of the menu. 

specify orientation of menu

The default orientation is vertical. The nav element that houses the menu will acquire a CSS class based on the selection. So a vertical menu will be rendered as follows:

<nav class="vertical">
    <ul class="main-menu">
​        <li>...</li>
    <ul>
</nav>

A horizontal menu will be rendered thus:

<nav class="horizontal">
    <ul class="main-menu">
​        <li>...</li>
    <ul>
</nav>

Managing menu items

As you may have already seen, you can add items to a menu when you create or edit pages. You can also add items to a menu from the Manage Menus link in the administation navigation.  Additionally, you can edit and delete items from a menu at the Manage Menus link.

First you must select the menu that you would like to manage. Any existing items that belong to the menu will be listed, along with two buttons: one that permits you to edit menu items, and the other that allows you to remove individual items from a menu (assuming you have permissions to do so). 

When editing an item, you can update the text that appears on the menu, the CSS class for the item and its display order. You can also amend its target value - using a valid value for the HTML target attribute. Once you have made the required changes, click the Save button and the grid should update.

If you would like to remove an item from the menu, click the Remove button. You will receive a confirmation prompt. Click Yes to confirm.

To add an item to the menu, click the Add Item button. You will be presented with a dropdown of all pages tat do not appear in the menu you are adding an item to. Select one and then provide some text for the menu item. Additionally, enter a numeric value to set the order of the item. If no value is supplied, the item will default to 0. 

Placing Menu widgets

You place a menu widget via the Place Menu Widget link. First, you need to choose the layout that the widget should be placed in. Then select the menu from the dropdown. Next, select the layer that the widget should be applied to. Then select the zone it should appear in. Finally, you can specify the order in which the widget should appear in the zone, assuming that other widgets will also be placed there. The ordering works in the same way as for menu items - in ascending order.