Creating and Customizing a Navigation Menu

This guide to the WibWabWeb Menu system covers the basic tasks when using the built-in menu editor such as: defining a menu, adding items to a menu, customizing menu items using the “Navigation Label” and “Title Attribute” options, deleting menu items, and creating multi-level menus.

Creating a Menu

You will have to define a menu before you can work on it. The steps below outline this process:

• Login to the WibWabWeb Dashboard.
• From the “Appearance” section on the left-hand side of the control panel, select the “Menus” option to bring up the menu editor. You should see something similar to the screenshot below:

• Enter a name for your new menu in the “Menu Name” box, then click the “Create Menu” button. For the sake of this example, we’ll give this menu the name “Right Navigation”, but you can give it any name you want. The menu editor should now look something like the screenshot below:

• Be sure to assign your Menu names in “Theme Locations” located on the Menu page.
  

Adding Items to a Menu

In this example, we’ll add 3 pages to the navigation menu we created in the previous section. One of the pages added will point to the “Home” page of the site. The steps you will need to take are listed below:

• In the left-hand corner of the menu editor screen, you should see a sub-menu titled “Pages”. In this sub-menu, click the “View All” link. This will bring up a list of all the pages that are currently published on your site. (See the screenshot below.)

• Select the pages you want to add to your menu by ticking the checkbox to the left of each item. In this example, the “About”,  ”Food”, and “Drinks” pages will be included. When you have selected the pages you want to include, click the “Add to Menu” button located at the bottom. You should now see a series of boxes, with the page titles of the items you added in the previous step, on the left-hand side of each box.

• Click the “Save Menu” button to save the changes.

Deleting a Menu Item

• To access the options for a menu item, left-click on the arrow icon in the top right-hand corner of the corresponding box. The menu item box should then expand, and the options you need to edit should be visible. See the screenshot below for an example.
  

• Click on the “Remove” link in the bottom left-hand corner. The menu item box should disappear.
• Click the “Save Menu” button to save the changes you have made.

Customising Menu Items

Before we jump to the example, a little explanation about the “Navigation Label” and “Title Attribute” options is needed.

The Navigation Label option specifies the title of the menu item as it appears on the navigation menu. This is what people will see in the navigation when they visit your site.

The Title Attribute option specifies the alternative text for the menu item. This is what will be displayed when somebody hovers the mouse over the menu item. You can use more descriptive text that would normally be too long to fit in the navigation menu.

The steps you will need to take are:

• Left-click on the arrow in the top right-hand corner of the menu item box. The menu item box should then expand and the options we need to edit should be visible.
• Enter the values for the Navigation Label and Title Attribute that you want to assign to the menu item, and then click the “Save Menu” button to save the changes. In the menu editor, the title for the menu item you edited should now be changed to the value you entered for the Navigation Label option.

Creating Multi-Level Menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal outline document.

In a formal outline, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc.) within the same section are indented even further to the right of the page.

The WibWabWeb menu editor allows you to create multi-level menus using a simple “drag and drop” interface. You can drag menu items up or down to change their order of appearance in the menu, or you can drag them left or right in order to create a multi-level menu structure. To make one menu item a subordinate of another item, drag it underneath and slightly to the right of the “parent” menu item.

We will build on the example menu used in the previous section. Currently the menu only consists of main menu (Level 1) items, as can been seen in the screenshot below:

• About (Level 1)
  • Food (Child Page 1)
  • Drinks (Child Page 2)
• Contact (Level 1)

In this example, the menu items  ”About” and “Contact” will be the main menu (Level 1) items, while ”Food” and “Drinks” will be sub-items, subordinate to “About”.

The steps you will need to take are:

• Position the mouse over the menu item box for “Food”. While holding the left mouse button, drag it to the right then release the mouse button.
• Repeat the above step for “Drinks” and make sure that “Food” and “Drinks” are both indented the same distance from the left. Your menu should now look like the screenshot below:

• Click the “Save Menu” button to save the changes. Your new menu, with the structure described in the example, should now be created.

The final menu, as seen by visitors to your site, might now look something like:

The "Right Navigation" menu on a website.