No matter what CMS we’re teaching, when we come to talking about themes and designs, one question always comes up quickly: “How do I make a dropdown menu”?
In this tutorial we’re going to help you understand some of the jargon surrounding multi-level menus. After all, when people talk about “dropdown menus” they are often describing just one of many different types of multi-level menu.
Dropdown menus are the most popular type of multi-level menu. One is illustrated in the image below. The menu links drop down vertically.
Another term you might see is flyout menu. One is illustrated in the image below. This is a horizontal version of the dropdown, where the submenus “flyout” from the side when you mouse over or click the main item. The basic code is the same, just the directions of the submenus are different. These descriptions are based on the orientation of the menu, not really different types of menus.
Dropline Menus ask you to mouse over or clicking the main menu item. When you do, a line appear below the main menu with additional choices. One is illustrated in the image below.
Accordion Menus are vertical menus where clicking the main item expands the section below it. Clicking the top link a second time closes the section. One is illustrated in the image below.
Mega Menus are dropdown menus that allow for the inclusion of content as well as links. One is illustrated in the image below.
A Split Menu is menu with two different locations so the menu is literally “split”. Often the parent items are in the Main Menu position and the child items are in the sidebar.
I’ve described the normal names for menu types. However, developers often create their own names for their menus. Nearly all of their menus use one of the techniques we’ve described. The only difference is the underlying code, so don’t get confused if you see names like these:
- Son of Suckerfish
You’ll find the term Suckerfish or variations of it used a lot. The first wldely popular use of this type code uses the suckerfish taxonomy as an example. If you like web trivia, check this example and follow the links to read some background on these menus.