Sub menus can be setup as horizontal navigation with drop downs or vertical sub menus that 'fly out'.
In this article we will setup the horizontal navigation with a drop down of categories and sub categories. The process is almost identical for both horizontal and vertical.
There are two parts to this and although the steps can be combined, it is helpful to understand it in a two step process. The first part being setup of the horizontal navigation and the second being the setup of the drop downs.
Setting up a Navigation Menu:
- Click on New in the upper right hand corner - and then fill out the required information.
- Give it a name (example: Flyout Categories - this will NOT display).
Step 3: Setup your category level link pages within thisMenu. Create one for each top level category you want to display.
- Click on Add New Link
- In the Display Text area - Name it based on the name you want to display in the navigation (This WILL show)
- Select Product Category from the "Type" drop-down.
- And then choose the top level category.
- Choose the Level of submenus you wish to display
Add a few more links and you can drag them around and nest under each other to create the dropdown structure you want.
Note: When you drag a link to nest it under another menu link, drag it slightly to the right as you move it into position.
You will also need to change the number of dropdowns for each link. This will tell the system how many sub-links you will allow to be shown in the menu underneath the main link.
Repeat Step 3: Create more top level category pages and do this for as many pages as you need.
At this point - you have defined what you want in your vertical (or horizontal) navigation.
To view the navigation on the storefront you need to set this Menu as the Menu on a Menu Widget in your theme.
Go to Themes, Edit theme.
Then Go to Header (or where the menu has been placed in the theme) and find your menu widget.
Next, scroll down until you see the menu widgets and click the "Add" button for "Menu Bar".
Once the widget has been added to your header, click on the edit button.
Once inside the editor, you can select which menu to display along with other options. Make sure to save.
You should now be able to see Dropdown Navigation in your storefront.
There are different widgets you can choose for widgets, whether it's going to be across the top or bottom horizontally. You can also create a menu list.
Vertical Dropdown Menu List:
The submenu system is a new that allows you to set up expanding menus that show when a user hovers the mouse pointer over the link associated with the menu. These menus can be styled separately from their parent menu.
NOTE: At this time, some complex CSS is necessary to achieve the full functionality of these submenus.