Navigation Areas

 

Each design has one main navigation and up to three secondary navigations. The main navigation features submenu items, a number of layout, color and animation settings and is positioned either above or to the left of the main content area. The secondary navigations are usually positioned on top right and at the bottom and have no additional settings. Some designs feature per-page secondary navigation as well.

 

Main Navigation Settings

The main navigation area in all designs (with the exception of Cocoa, FutureTech, Pasta, Charcoal and Chromia designs) has a number of different position, style and submenu appearance settings. To change the navigation area settings rollover your main navigation and click the blue  icon on its top left. Firstly you will be presented with an option to specify the Sub-Menu Animation style, while more options will be available once Advanced Options are enabled:




The navigation settings may be two types, depending on the selected design:

 

Type1 - used in Aurora design

 

 

 

 

 

 


Type2 - used in Sirius, Atria, Meissa, Kuma, Polaris and Vega designs

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


The available menu settings will reflect upon your navigation area appearance as follows:

  • Menu Style: when you use the default menu style only your menu texts will be colored with the selected color. Complete-color style option will fill in the whole menu item cell with the selected color.
  • Submenu Layout: if your main menu is positioned on top, the submenu items may appear horizontally aligned below the main menu items, or in a vertical dropdown. If the main menu is positioned on the left, the submenu may only appear vertically, either below its main menu item or to the right of it.
  • Submenu Animation: this is the animation effect used to display the submenu items. The available options are: slide down, fade in, no animation.
  • Menu Type: flash or text-based. By default your menu type is displayed as text. Customized websites using non-standard menu fonts may use flash menus.
  • Menu Alignment: different alignment (left, right and center) options are available only with the horizontal main navigations.

 

Navigation areas may not be deleted. But you can always delete all menu items inside them, or hide the navigation area for end-users. To hide a navigation area roll it over and from the  icon displayed on top left choose Hide from viewers. Hidden navigation areas appear grayed. To unhide an area roll it over and choose Show to viewers from the  icon.

 

Per-page Navigation Area

Per-page navigation is available with some designs only. It is located either to the left of the content area (Aurora, FutureTech designs) or above it (Cocoa, Kuma designs). This navigation type allows to display different navigations on different pages from the site. Per-page navigation might be appropriate, for example, when the website has multiple product pages and you need a quick reference to all other products from each product page.

 

To add a per-page navigation rollover the per-page empty navigation area and click the  icon on its top left. From the Navigation Properties window select [New Preset] and type a name for the navigation. Click Update.

 

 

In some per-page navigations (for example, in Kuma design) you may also choose an alignment (left, center, right) for your per-page navigation.


*In some designs, the Left Navigation Column must be enabled from Page Options to use the per-page navigation. 


After you add the per-page navigation you may start adding navigation items to it by rolling it over and clicking the  icon displayed on top right.

 

To display an already added per-navigation area on another page, go to the per-page navigation area of that page and click the  icon on its top left. Choose the desired navigation from the dropdown and Update.

 

 

To rename an already added per-page navigation select it from the dropdown an click Rename.

To delete a per-page navigation or hide it from viewers select the respective action from the options available on roll over of the navigation  icon.

 

Read next: Add Navigation Items tutorial >>