Creating multi-level menus with interactivity
You can create templates for multi-level Drupal menus. Before you try this, you should follow the guide for creating a simple single level menu as this explains the full process.
Structuring a multi-level menu
The screen-shot below shows the structure of a 3 level menu template. It shows that for each level required in the menu, you must add a new Menu list container, Menu list item and Menu link. These must be nested within the Menu list item of the parent level.
If you require more than three levels, simply nest additional elements in the same pattern below. You can nest as many levels as you want. Any nested elements not required by your menu are simply ignored.
The structure above is illustrated in the diagram below for a 3 level menu layout.
Laying out and styling a multi-level menu
Each level you add to your Menu template uses a new Menu list container <ul>, Menu list items <li's> and Menu links <a>. You can apply styling to each menu level to define its layout and appearance.
For example, to create a mega-navigation like in the diagram above:
- Create a style for the Menu level 1 - Menu list container to place the Menu list items inline
- Create a style for the Menu level 2 - Menu list container to place the Menu list items within a panel
- Add a Row for columns element and two Columns to the Menu level 2 - Menu list container
- Add a Menu list item to both columns
- Set the Menu list item in column one to show a range of Menu links from 1-6
- Set the Menu list item in column two to show a range of Menu links from 7-999. This should more than accommodate the number of links you need to show in the second column
- To add a third level, nest another Menu list container, Menu list item and Menu link within your level two Menu list item
- Apply a style to your Menu level 3 - Menu list container to style the third level links.