Creating a Drop Down Navigation Using a Form Checkbox

Creating a drop down navigation will allow a site to be easily navigated from a desktop computer or mobile device. Here we will explain how to create this navigation with just HTML and CSS. The following steps are required:

1. Setup HTML <nav>: Create a <nav> with navigation links.
2. Add Form Elements: Add a label and input checkbox to the <nav>.
3. Add Attributes: Add some IDs and a FOR attribute to the <nav> elements.
4. Setup CSS: Create CSS that will give the functionality of toggling the link visibility on/off.

1) Setup HTML <nav>

To create a drop down menu first create a simple <nav>. The follow code is an example of a normal navigation with an unordered list for the links (the link code has been removed from this example, but will be included in the activity on this page).

<nav>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</nav>

2) Add Form Elements

The next step is to add a form label and input element, which will give the menu the ability to be clicked. We will add these two form elements inside the <nav>, just above the <ul>.

<nav>
    <label>Show Menu</label>
    <input type="checkbox">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</nav>

3) Add Attributes

Three attributes will be added to the <nav> elements. The "menu" ID is intended to simplify the CSS that needs to be written. The "toggle" ID identifies the input box, and directly correlates with the for attribute on the label. These need to have the same name to make a connection between the two elements. The noticeable effect of a successful connection is that the label can be clicked and the checkbox will toggle on/off.

<nav>
    <label for="toggle">Show Menu</label>
    <input id="toggle" type="checkbox">
    <ul id="menu">
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</nav>

4) Setup CSS

Only two CSS rules are needed to make the drop down menu function. The first rule sets the #menu <ul> to be hidden by default. This is normal for a drop down navigation. The second rule is only applied when the #toggle input checkbox is checked, and if it is checked it makes the sibling #menu <ul> element visible. These two rules give the drop down menu the functionality of toggling on/off the visibility of the links.

#menu{
  display: none;
}

#toggle:checked ~ #menu{
     display: block; 
}