neatComponents - A Vertical navigation bar


Previous page	Building & Styling Applications & Sites	Next page
A Vertical navigation bar

The system supports multiple levels of navigation. In this example we shall see how left-hand navigation can be 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 3 (see right).

Styling the Navigation

The system will provide a default color-way and font for the navigation

You can style the navigation by selecting the navigation 'zone', in the Layout Manager then right-click to access the 'Configuration' where you can access the Style option.

A dialog similar to the one shown below will open.

Here is an example 'recipe' that you can use as a basis for your own experiments.

Images, buttons and text
Note that for SEO purposes navigation links should always be 'real' text. You can adjust the styling to have background images 'behind' the text if that is what your design requires.

Using the Style tool we made the following setting changes: