Dropdown vs Flyout vs Dropline vs Mega vs Accordion Menus

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

Dropdown menus are the most popular type of multi-level menu. One is illustrated in the image below. The menu links drop down vertically.

Flyout Menus

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

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

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

Mega Menus are dropdown menus that allow for the inclusion of content as well as links. One is illustrated in the image below.

Split Menus

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.

Extra Names

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:

Suckerfish
Son of Suckerfish
Supersucker
Transmenu

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.