How to Create a Clickable Dropdown Menu with CSS and JavaScript

how-to-create-a-clickable-dropdown-menu-with-css-and-javascript

Dropdown menus are an important aspect of any website as they allow for easy navigation and organization of content.

In this tutorial, we will be discussing how to create a clickable dropdown menu using CSS and JavaScript.

This tutorial is suitable for both beginner and intermediate level developers who are interested in enhancing their web development skills.

HTML Markup

Before we start with the CSS and JavaScript, let’s first create the basic HTML markup for our dropdown menu.

<div class="dropdown">
  <button class="dropdown-btn">Dropdown</button>
  <div class="dropdown-menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

In the above code, we have created a div with class dropdown which serves as our dropdown container.

Inside this div, we have a button with class dropdown-btn that serves as the trigger for our dropdown menu.

Finally, we have another div with class dropdown-menu which contains our dropdown links.

CSS Styles

Next, let’s style our dropdown menu using CSS.

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-btn {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-menu a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-menu a:hover {
background-color: #f1f1f1;
}

In the above CSS styles, we have defined the basic styles for our dropdown container, button, and menu.

The position: relative and position: absolute properties are used to position our dropdown menu relative to our button.

The display: none property is used to hide our dropdown menu by default.

JavaScript Functionality

Finally, let’s add the necessary JavaScript code to make our dropdown menu clickable.

const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownBtn.addEventListener('click', () => {
dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
});

In the above code, we are using the querySelector method to select our dropdown-btn and dropdown-menu elements.

We then add a click event listener to our dropdown-btn and toggle the display property of our dropdown-menu using a ternary operator.

When the button is clicked, if the display property of the menu is set to block, we set it to none, and if it is set to none, we set it to block.

This way, the dropdown menu will toggle open and close when the button is clicked.

Conclusion

In this post, we have discussed how to create a clickable dropdown menu with CSS and JavaScript.

By following the steps outlined in this post, you can create your own dropdown menu with ease.

If you have any questions or comments, feel free to leave them in the comments section below.

Tags

Related Posts