How to create a clickable dropdown menu with CSS and JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss how to create a clickable dropdown menu using CSS and JavaScript.

A dropdown list is a toggleable menu that allows users to choose one option from more than one.

To explain with a real−world example, if a user creates an account in a learning management website; all the information related to the user’s account − including their profile, settings, log out button − are all mentioned in the dropdown menu provided by the website. This makes it easier for the user to manage their account efficiently.

Example 1

In this example we are creating a webpage displaying “drop down menu”. A menu with 4 links which will appear after click.

Example.html

Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required text, a drop down menu and empty navigation Links for the menu.

<body>
   <div class="dropdown">
      <button onclick="show_hide()" class="button">DropDown Menu</button>

      <!-- dropdown list items will show when we click the drop button -->
      <div id="list-items">
         <a href="#"> Tutorials </a>
         <a href="#"> About Us </a>
         <a href="#"> Contact Us</a>
         <a href="#"> career </a>
      </div>
   </div>

Example.css

Add css style to give background and hover effect on the drop down menu for a better look. In this example we are styling the link of drop down menu if we hover on the link background color will be change.

<style>
   /*position of dropdown */
   .dropdown {
      position: absolute;
      display: block;
   }
   /* set the size and position of button on web */
   .button {
      background: gray;
      padding: 10px 22px;
      font-size: 15px;
      border: none;
      }
   .button:hover{
      background: rgb(240, 144, 144);
   }
   /* provide css to background of list items */
   #list-items {
      display: none;
      position: relative;
      background-color: white;
      width: 156.5px;
   }
   /* provide css to list items */
   #list-items a {
      display: block;
      font-size: 15px;
      background-color: rgb(240, 144, 144);
      color: black;
      text-decoration: none;
      padding: 10px;
      text-align: center;
   }
</style>

Example.js

using the javascript we can perform validation and handle event on the page. In this example we are using display property for drop down menu if user click on the button then the dropdown menu will appear after clicking again menu will disappear.

<script>
   //show and hide dropdown list item on button click
   function show_hide() {
      var click = document.getElementById("list-items");
      if (click.style.display === "none") {
         click.style.display = "block";
      } else {
         click.style.display = "none";
      }
   }
</script>

Complete Example

Following is an example for this –

<html>
<head>
   <title>dropdown menu using button</title>
</head>
   <style>
      /*position of dropdown */

      .dropdown {
         position: absolute;
         display: block;
      }

      /* set the size and position of button on web */

      .button {
         background: gray;
         padding: 10px 22px;
         font-size: 15px;
         border: none;
      }

      .button:hover {
         background: rgb(240, 144, 144);
      }

      /* provide css to background of list items */

      #list-items {
         display: none;
         position: relative;
         background-color: white;
         width: 156.5px;
      }

      /* provide css to list items */

      #list-items a {
         display: block;
         font-size: 15px;
         background-color: rgb(240, 144, 144);
         color: black;
         text-decoration: none;
         padding: 10px;
         text-align: center;
      }
   </style>
<body>
   <div class="dropdown">
      <button onclick="show_hide()" class="button">DropDown Menu</button>
      <!-- dropdown list items will show when we click the drop button -->
      <div id="list-items">
         <a href="#"> Tutorials </a>
         <a href="#"> About Us </a>
         <a href="#"> Contact Us</a>
         <a href="#"> career </a>
      </div>
   </div>
   <script>
   //show and hide dropdown list item on button click
   function show_hide() {
      var click = document.getElementById("list-items");
      if (click.style.display === "none") {
         click.style.display = "block";
      } else {
         click.style.display = "none";
      }
   }
   </script>
</body>
</html>

Example 2

In the following method, we are creating a drop-down whether the user clicks on the button it will show. If the user clicks outside the links, then it will hide.

Let’s see the javascript code

<script>
   /* toggle between hiding and showing the dropdown content */
   function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show"); //adding a class show
   }
   // Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
         var dropdowns = document.getElementsByClassName("dropdown-content");
         var i;
         for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
               openDropdown.classList.remove('show');
            }
         }
      }
   }
</script>

Complete Example

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
   .dropbtn {
      background-color: #34db74;
      color: rgb(0, 0, 0);
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
   }

   .dropbtn:hover,
   .dropbtn:focus {
      background-color: #29b965;
   }

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

   .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      overflow: auto;
      z-index: 1;
   }

   .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
   }

   .show {
      display: block;
   }
   </style>
</head>
<body>
   <p>Click on the button to open the dropdown menu.</p>
   <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
         <a href="#home">Home</a>
         <a href="#about">About</a>
         <a href="#contact">Contact</a>
      </div>
   </div>
   <script>
   /* toggle between hiding and showing the dropdown content */
   function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show"); //adding a class show
   }
   // Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
         var dropdowns = document.getElementsByClassName("dropdown-content");
         var i;
         for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
               openDropdown.classList.remove('show');
            }
         }
      }
   }
   </script>
</body>
</html>

Example 3

Following is another example to create a clickable dropdown menu using CSS and JavaScript –

Complete Example

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
   .menu-btn {
      background-color: #7e32d4;
      color: white;
      padding: 16px;
      font-size: 20px;
      font-weight: bolder;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border: none;
   }

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

   .menu-content {
      display: none;
      position: absolute;
      background-color: #017575;
      min-width: 160px;
      z-index: 1;
   }

   .links {
      color: rgb(255, 255, 255);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid black;
   }

   .links:hover {
      background-color: rgb(8, 107, 46);
   }

   .dropdown-menu:hover .menu-btn {
      background-color: #3e8e41;
   }
   </style>
</head>

<body>
   <h2>Click on the below dropdown button to open/close dropdown menu</h2>
   <div class="dropdown-menu">
      <button class="menu-btn">Open</button>
      <div class="menu-content">
         <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('.menu-btn');
   let menuContent = document.querySelector('.menu-content');
   dropdownBtn.addEventListener('click', () => {
      if (menuContent.style.display === "") {
         menuContent.style.display = "block";
      } else {
         menuContent.style.display = "";
      }
   })
   </script>
</body>
</html>