neatComponents - A Vertical navigation bar

The system supports multiple levels of navigation. In this example we shall see how the left-hand navigation in the 'Good Website' was achieved. This is an example of level-2 navigation, as it is allowing explicit navigation display of the pages or sections within a section.

Step 1. To get the Navigation to display in the correct location on the page, you first use the Layout Manager and adjust the Zones in the left layout element to have the desired characteristics. In this case the design of the website calls for an image above and below a navigation made up of buttons that change color as you mouse over them, and indicate the selected page.

Zones 1, 2 and 3 have been combined. The resulting Zone 1 has been set to 'Image' and an appropriate image has been uploaded using the built-in image edit tool in the local menu, and the background set to be light gray using the Edit Zone Style tool in the local menu.

Zones 4 and 6 have been set to 'Empty' and set to be light gray using the Edit Zone Style tool in the local menu.

Zones 7, 8 and 9 have been combined. The resulting Zone 7 has been set to 'Image' and an appropriate image has been uploaded using the built-in image edit tool in the local menu, and the background set to be light gray using the Edit Zone Style tool in the local menu.

Zone 5 has been set to Navigation and the background set to be light gray using the Edit Zone Style tool in the local menu. The Navigation Editor setting has been changed from Level 1 to Level 2 (see above left).

Step 2. Using the Zone Edit

Style tool we made the following setting changes.