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.

A second dialog box will appear where you can customize your menu. You can choose the MENU ROOT, MENU DEPTH, and MENU STYLE.

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).

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.

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.

Let’s look at them one at a time. Each one will be shown with a menu depth of two.

VERTICAL will look like this on the actual website. Both levels of the menu can be seen at all times.

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.

VERTICAL - LINKS will look like this. Both levels can be seen at all times.

VERTICAL - EXPAND ON CLICK will look like this after clicking. Before clicking, only the first level is visible.

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.

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.

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.

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.