CSS Styles for Dropdownlist

Introduction

The dropdown menu is a type of design pattern by which we can hide or reveal a dropdown box, making it easy for users to navigate websites and applications. When the user clicks or hovers on the menu, then it gracefully displays predefined content or a list of items.

In this article, we are going to explore the art of creating captivating dropdown menus that can seamlessly integrate into a navigation bar or any section of a web project. First, we begin with CSS-only solutions, the: focus and:focus-within pseudo-classes, and a checkbox hack. Then, we will learn about it in depth by utilizing JavaScript and addressing the limitations faced with CSS-only approaches.

We will also discuss building dropdown menus for both larger and smaller screens and using semantic HTML elements and ARIA attributes to assist screen readers.

Creating a Dropdown Menu with the CSS: focus pseudo-class>

We can start building an accessible dropdown menu that begins with using semantic and interactive HTML5 elements where appropriate.

With the help of the following code, we can establish a simple menu button along with its associated dropdown items:

Here, the <button> element is an interactive element that is used to initiate the opening of the dropdown. To ensure accessibility, we use an unordered list for the dropdown items; this enables screen readers to identify the number of links within the dropdown.

Let us apply the CSS property.

In the above code, we have provided the configuration to position the dropdown box below the menu button. With the help of the above code, we have achieved the position: relative property to the container element and the position: absolute to the actual dropdown.

Now let's see the complete code:

HTML code:

Output:

Toggling the Dropdown using a CSS Checkbox Hack

In the previous code, when the user hovered out from the menu, the options were lost. But with the clever help of CSS selectors, we can use the checked state of an HTML checkbox to toggle the dropdown.

Now, in our previous code, let's replace the button element with an input checkbox:

Now, let's add some CSS styles to the old CSS file.

Now we have to set the opacity as 0 to hide the input checkbox instead of a display: none; property. Also, we have to make sure that the button receives a focus when a user interacts with it.

Now let us replace the: focus or:focus-within with the: checked CSS pseudo-selector:

Adding a Transforming Effect

Now, we have to add a transition effect that opens the option vertically. So we have to update the styles for .dropdown-content before and after the dropdown is active:

Now let's see the complete code:

HTML code:

Output:

Creating Dropdown Menus with CSS + JavaScript

In the previous code, we created the dropdown list with the help of HTML and CSS only. Now, let's create the above project with the help of JavaScript to toggle the dropdown instead of using the checkbox hack. Let's modify the above code.

In the above code, instead of CSS pseudo-classes, we use custom class names that we will add to the target elements using JavaScript.

With the help of the below javascript snippet, we implement the javascript process. The process begins by selecting the button, caret, and dropdown elements. Then, it listens for a click event on the button and dynamically adds classes to the caret and dropdown elements:

Let us see the complete code after adding the javascript code:

HTML code:

Output:

Let's update the above HTML code by updating the ARIA attribute.

Also, we have to update the aria-expanded attribute based on the current state in the JS file.

Adding a Dropdown Menu to a Navbar

Using the above knowledge, let's integrate a dropdown menu within a navigation bar using CSS.

By the end of the process, we'll have successfully developed a responsive CSS dropdown menu:

Code:

Output:

Navbar and Dropdown Menu Markup

In the code below, we have created the basic structure, which contains three primary menu items: Home, Services, and About. The Services item includes a dropdown feature with three nested ul submenu items:

Output:

It will give us the below output:

Mobile-first Dropdown Menu Design with CSS

Now, let's create a navigation menu for mobile devices. To achieve this, we have to add some CSS code to our CSS file.

Css code:

Output:

If we change the resolution of the screen similar to the mobile phone resolution, then we get the below output:

Interacting with the Dropdown Blocks

Now we have to hide the main dropdown button with the help of the visibility property, and also, we have to set the height as 0. So, we have to update our CSS file:

Now, we have to use the checked CSS pseudo-selector and the focus-within pseudo-class to toggle the main dropdown and activate the Services dropdown. Now the CSS file becomes:

Adding a Sliding Effect Transition to Dropdown Items

For a better appearance, we have to add some animation with the help of the following:

Designing Dropdown Menus for Larger Screens with CSS

Now we have to add CSS media queries and define the style rules for a screen width of 640px and above: