Create Clickable Dropdown Menu with CSS and JavaScript

To create a clickable dropdown menu with CSS and JavaScript, it helps in adding more options, content or links in webpage while saving the space and not overcrowding the webpage. User should have basic knowldge of CSS and javascript to design and add interactivity to the dropdown menu.

In this article, we are having a button and three links and our task is to create a clickable dropdown menu with CSS and JavaScript.

Steps to Create a Clickable Dropdown Menu

We will be following below mentioned steps to create a clickable dropdown menu with CSS and JavaScript:

• Structuring the Dropdown Menu with HTML
• Designing the Dropdown Menu with CSS
• Adding functionality to Dropdown Menu with JavaScript

Structuring the Dropdown Menu with HTML

• To create the dropdown menu, we have used a button and three anchor tags to create a button with three drop down menu links and wrap all the links in a div element with class menuList.
• We have wrapped all the elements including button and drop down links in a div element with class container.

Here is the HTML implementation of above mentioned steps to create a clickable dropdown menu with HTML.

<div class="container">
    <button class="drop_btn">Open</button>
    <div class="menuList">
        <a class="links" href="">Contact Us</a>
        <a class="links" href="">Visit Us</a>
        <a class="links" href="">About Us</a>
    </div>
</div>

Designing the Dropdown Menu with CSS

• The container class positions the menu link relative to the container rather than the whole page using position property and takes up only the required width using display property.
• The drop_btn class designs the "Open" button by setting it's background-color, text color, padding, font-size, width, font-family and removing the border.
• Then we have designed the drop down menu list using menuList class. Here we have initially kept the list hidden using display property, positioned it relative to container, set the min-width property to match the width of button and gave higher priority in case of overlap with other elements using z-index property.
• Next, we have designed all the anchor links using links class. We have set their text-alignment, removed the underlining of links using text-decoration, set the border, color and padding of the links.
• We have used :hover psuedo class on links and button to change the background-color and text color upon hovering over them.

Here is the CSS implementation of above mentioned steps to design the dropdown menu with CSS.

.container {
   position: relative;
   display: inline-block;
}
.drop_btn {
   background-color: #031926;
   color: white;
   padding: 16px;
   font-size: 16px;
   font-family: Verdana, sans-serif;
   border: none;
   width: 160px;
}
.menuList {
   display: none;
   position: absolute;
   background-color: #031926;
   color: white;
   min-width: 160px;
   z-index: 1;
}
.links {
   text-align: center;
   color: rgb(255, 255, 255);
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   font-size: 18px;
   border: 1px solid #031926;
}
.links:hover {
   background-color: white;
   color: #031926;
}
.container:hover .drop_btn {
   background-color: #04af2f;
   color: white;
}

Adding functionality to Dropdown Menu with JavaScript

• First we have initialized two variables i.e dropdownBtn and menuContent for the button and menu list holding all the links respectively using querySelector() method.
• Then we have added a click event to dropdownBtn using addEventListener() method which uses simple if-else conditional statement to hide and display the menu links upon clicking the button.
• Upon clicking on button, when the menu list is hidden i.e display === "" then it displays the menu list using display = "block" and if the menu list is already displayed then upon clicking the button it hides the menu list.
• Similarly, we have added a click event when clicked outside the button and menu list to hide the menu list if being displayed. It checks if click event is inside button or menu list using contains() method.

Here is the implementation of above mentioned steps to add functionality using JavaScript.

let dropdownBtn = document.querySelector('.drop_btn');
let menuContent = document.querySelector('.menuList');
dropdownBtn.addEventListener('click', () => {
   if (menuContent.style.display === "") {
      menuContent.style.display = "block";
   } 
   else {
      menuContent.style.display = "";
   }
})
document.addEventListener('click', (e) => {
   if (!menuContent.contains(e.target) && 
      !dropdownBtn.contains(e.target)) {
         menuContent.style.display = "";
   }
});

Complete Example Code

Here is the complete example code to create a clickable dropdown menu with CSS and JavaScript.

<!DOCTYPE html>
<html>
<head>
   <title>
      Creating a clickable dropdown menu with CSS and JavaScript
   </title>
   <style>
      .container {
        position: relative;
        display: inline-block;
      }
      .drop_btn {
        background-color: #031926;
        color: white;
        padding: 16px;
        font-size: 16px;
        font-family: Verdana, sans-serif;
        border: none;
        width: 160px;
      }
      .menuList {
        display: none;
        position: absolute;
        background-color: #031926;
        color: white;
        min-width: 160px;
        z-index: 1;
      }
      .links {
        text-align: center;
        color: rgb(255, 255, 255);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 18px;
        border: 1px solid #031926;
      }
      .links:hover {
        background-color: white;
        color: #031926;
      }
      .container:hover .drop_btn {
        background-color: #04af2f;
        color: white;
      }
   </style>
</head>
<body>
   <h3>
      To Create a Clickable Dropdown Menu 
      with CSS and JavaScript
   </h3>
   <div class="container">
      <button class="drop_btn">Open</button>
      <div class="menuList">
         <a class="links" href="">Contact Us</a>
         <a class="links" href="">Visit Us</a>
         <a class="links" href="">About Us</a>
      </div>
   </div>
   <script>
      let dropdownBtn = document.querySelector('.drop_btn');
      let menuContent = document.querySelector('.menuList');
      dropdownBtn.addEventListener('click', () => {
         if (menuContent.style.display === "") {
            menuContent.style.display = "block";
         } else {
            menuContent.style.display = "";
         }
      })
      document.addEventListener('click', (e) => {
         if (!menuContent.contains(e.target) && 
            !dropdownBtn.contains(e.target)) {
               menuContent.style.display = "";
         }
      });
   </script>
</body>
</html>

Conclusion

In this article, we understood how to create a clickable dropdown menu with CSS and JavaScript. We have used three steps process i.e create, design and add interactivity to drop down button. We have used basic CSS properties and click event to create the clickable dropdown menu.