Simple Dropdown

by | Jun 3, 2019 | Web Design | 0 comments

Hello everyone! Let’s dive right into creating our own very simple dropdown menu (or any container.) We won’t be doing anything fancy with this, other than what is shown in the following preview:

To create this dropdown menu, create an HTML file somewhere and name it however you like. Inside this HTML file, let’s add some basic code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple Dropdown</title>
    </head>

    <body>

    </body>
</html>

Next, we will need to define the markup for our dropdown menu. In order to toggle the menu, we will use a neat trick that we can perform with checkboxes. We can make a checkbox invisible, and use the label to trigger the dropdown. Since labels allow you to specify the ID of the checkbox you want toggled when you click the label, this will work fantastically. Let’s add the following two lines between the <body> tags:

        <input id="input-dropdown" type="checkbox">
        <label for="input-dropdown">Click me!</label>

The first line adds a checkbox, and the second line is the label which triggers the checkbox when clicked. Next we will need to add the element which will expand and retract when clicked. In our case, this will be a <ul> element (unordered list.)

        <ul id="dropdown">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>

Do note that you can put any element in the <li> tags such as an <a> tag for specifying a link.

Finally, we will need to add the styles to make our dropdown menu work. Between the <head> tags, we will need to add a set of style tags:

        <style>

        </style>

Inside these style tags, we will first need to add a style rule to make the checkbox invisible. We can reference the checkbox via a pound sign and the ID we specified in our HTML. Add the following style rule:

            #input-dropdown {
                display: none;
            }

Next, we want our content (the dropdown) to be collapsed by default. To accomplish this, we will set the max-height property to 0. This allows our content to be any size, while still providing the ability to be collapsed. We will also need to set the property, overflow, to hidden. This allows us to hide content in our dropdown when the max-height is set to 0. Let’s add the style rule for our dropdown:

            .dropdown {
                max-height: 0;
                overflow: hidden;
            }

Last, we need to add one last style rule for expanding our dropdown. To do this, we can simply set max-height to 100%. We will also utilize the general sibling combinator. This selector allows us to select the dropdown following our checkbox and label. You can read more about the general sibling combinator from the MDN web docs. Let’s add our last style rule:

            #input-dropdown:checked ~ #dropdown {
                max-height: 100%;
            }

If we take a look at our page, we should now see our dropdown!

Hopefully this tutorial can helps a lot of you out! If it has, consider filling out the form to receive news about future tutorials and courses we publish. If you have any questions, comments, or feedback, feel free to email me at jared.york@yorkcs.com or tweet me @jaredyork_. You can also find me on Minds as well!

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news regarding tutorials and courses we publish!

Please check your inbox to confirm your subscription.

Share This