The dropdown menu

When developing menu systems you need to understand the difference between a dropdown and an accordian.

I discuss the difference between the two on my main website. However, the discussion was not easy to find and it is one of the more eclectic subjects of my design. I took an example from the W3C Schools website that demonstrates the difference.

The W3C website explains:

I have an example of this code on a page on my main website. The code is also used in the menus on some of the pages on this website. However, I have removed the accordian from the side/overlay menu on this page.

The menu on this page

Depending on what device you are viewing this page the menu will be different.

On a desktop or other large display you will see the "Overlay - Side Menu on the left of the screen. When viewed on a mobile device you will see a menu button that looks like a conventional dropdown.

In addition, on a large display there is a "dropdown" on the top bar to the right of the left side menu. This is an "expandable dropdown", my name for it. All the menus are based on CSS classes from the W3C.css Framework. This is for convenience, the dropdowns can be coded just using standard CSS.

The difference and when they are used

The W3C explaination above describes what these menu options do. I explain here when and why they are used.

The challenge

The challenge is to deterime what sort of dropdown you require. This depends on where you are wanting to implement a menu.

The code

The W3.css Framework classes are:

• w3-dropdown-hover
• w3-dropdown-content, w3-bar-block and w3-bar-item
• and for the Accordian dropdown - w3-bar-item w3-button