Create Menus

In this tutorial you will learn how to create menus with varying content and in different styles.
If you want your website to be more than just a single homepage, you need at least one menu. Menus allow visitors to access the pages of your website. If any section of your website does not have a menu, visitors will not be able to see or access it at all.
To create a menu, go to the static block or category where you would like to insert the menu, and click on the green plus icon. Then select MENU.
1 Select menu element edited with marks.png
A second dialog box will appear where you can customize your menu. You can choose the MENU ROOT, MENU DEPTH, and MENU STYLE.
2 Menu dialog box.png
The MENU ROOT is the section, category, or subcategory whose categories or subcategories will be displayed in the menu. You can see above that in this scenario the default menu root is the section Alto Travel. The dialog box includes the name of the menu root, Alto Travel, plus the names of the first three categories in that section. If you choose to create a menu with this root, the menu will not include Alto Travel. It will only include the contents of Alto Travel.
In this example, you have five choices in the dropdown. Two sections, two categories, and one subcategory. These are all of the sections, categories, and subcategories on the website which have their own categories or subcategories. If you want visitors to be able to access all the pages of this website, create at least two menus - one for each section (Alto Travel and Packages).
3 Menu root.PNG
The MENU DEPTH specifies how many levels of categories and subcategories will be shown in the menu. If you select a menu depth of 1 your menu will only include the first level of categories (Africa, Antarctica, Asia, etc.). If you select a menu depth of 2 it will include the categories mentioned previously, plus the subcategories of each of those categories (in this case, the destinations in North America). If you select a menu depth of 3 it will also include the subcategories of the subcategories (the detailed breakdown of the Caribbean), and so forth. In this example there are no level 4 subcategories, so there is no sense in choosing a menu depth of 4 or more.
4 Menu depth edited.PNG
The MENU STYLE specifies whether the menu will be vertical or horizontal and also affects other aspects of the menu design.
As you can see below there are four styles of vertical menus and three styles of horizontal menus.
5 Menu style edited.PNG
Let’s look at them one at a time. Each one will be shown with a menu depth of two.
When in the left column:
VERTICAL will look like this on the actual website. Both levels of the menu can be seen at all times.
6 Vertical with marks cropped.png
VERTICAL - EXPAND ON ROLLOVER will look like this if you roll over North America. When the cursor is not over North America, only the first level will be visible.
7 Vertical expand on rollover cropped with marks.png
VERTICAL - LINKS will look like this. Both levels can be seen at all times.
8 Vertical links cropped with marks.png
VERTICAL - EXPAND ON CLICK will look like this after clicking. Before clicking, only the first level is visible.
9 Vertical expand on click cropped with marks.png
When in the header:
HORIZONTAL - EXPAND ON ROLLOVER will look like this if you roll over Information. When the cursor is not over Information, only the first level will be visible.
10 Horizontal expand on rollover with marks.png
HORIZONTAL - LINKS will look like this if you roll over Information. When the cursor is not over Information, only the first level will be visible.
11 Horizontal links with marks.png
HORIZONTAL - TABS will look like this if you roll over Information. When the cursor is not over Information, only the first level will be visible.
12 Horizontal tabs with marks.png
After choosing the MENU ROOT, MENU DEPTH, and MENU STYLE, don’t forget to SAVE.
If you decide later you’d like to change something about your menu, just click on the yellow edit icon to reopen the dialog box. If you’d only like to adjust the width of your menu, use the gray arrows to click and drag. (These two icons are underlined on the screenshot below.) When horizontal menus aren’t wide enough they don’t look horizontal.
13 Make adjustments edited with marks.png
Congratulations! You’ve completed the tutorial on creating menus.

If you have any questions please contact the helpdesk at support@webgarden.com.
09/30/2015 04:50:51
info
Name
Email
Comment
Or visit this link or this one