Table of Contents
2.1.1. Drop-down menus
Purpose
Drop-down menus are dynamic lists whereby first level list items are visible by default. When you move the cursor over a first level item, or set the focus on it, the corresponding second level items are shown in a drop-down panel.
If the items on the first level are not links, and their only function is to display or conceal the panels, then the drop-down menu should be considered as an accordion menu.
In this situation, it may be a good idea to modify the script for a standard accordion, so that the content of the panels is also displayed when you move the mouse pointer over the item.
If there are a great deal of interactive elements on the drop-down panels (links, form elements, etc.), it is a good accessibility practice to give priority to the accordion behaviour.
Displaying the drop-down panels only when the user interacts with the corresponding first level item makes it possible to optimise the page navigation with the keyboard, by limiting the number of elements that can receive the focus, by default.
Basic HTML code
An example of the basic HTML code for a drop-down menu is shown below. This code needs to be modified according to the context, especially with respect to the content of the drop-down menus.
<ul id="menu"> <li> <a href="#">First level link 1</a> <ul> <li><a href="#">Second level link 1</a></li> <li><a href="#">Second level link 2</a></li> <li><a href="#">Second level link 3</a></li> </ul> </li> <li> <a href="#">First level link 2</a> <ul> <li><a href="#">Second level link 4</a></li> <li><a href="#">Second level link 5</a></li> <li><a href="#">Second level link 6</a></li> </ul> </li> <li> <a href="#"> First level link 3</a> <ul> <li><a href="#">Second level link 7</a></li> <li><a href="#">Second level link 8</a></li> <li><a href="#">Second level link 9</a></li> </ul> </li> </ul>
Without JavaScript, all menu items (first and second level) are displayed.
Behaviour with JavaScript
Javascript deals with the following points:
- When the script is loaded, the panels are positioned outside the screen using the CSS property
position: absolute;andleft: -999999px;. - When a first level item receives the focus, or when the mouse pointer is over this element, the corresponding panel is displayed on the screen.
- When the first level item loses the focus, or when the mouse pointer is no longer over this item, the corresponding panel is moved outside the screen.
