Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

Javascript Web Development Front End Technology

To create a clickable dropdown menu with CSS and JavaScript, you can build an interactive navigation component that saves space while providing easy access to multiple options. This approach helps keep your webpage clean and organized without overwhelming users with too many visible elements.

In this tutorial, we'll create a dropdown menu with a toggle button and multiple navigation links, demonstrating the complete process from HTML structure to JavaScript interactivity.

Steps to Create a Clickable Dropdown Menu

We will follow these three essential steps to build our dropdown menu:

Structuring the Dropdown Menu with HTML

The HTML structure consists of a container with a toggle button and hidden menu items:

  • Create a button element that serves as the dropdown trigger
  • Wrap navigation links in a div with class menuList
  • Contain everything within a container div for proper positioning
<div class="container">
    <button class="drop_btn">Menu</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 CSS styles control the appearance and initial visibility of the dropdown:

  • The container uses relative positioning to contain the absolutely positioned dropdown
  • The drop_btn class styles the toggle button with colors, padding, and typography
  • The menuList is initially hidden with display: none and positioned absolutely
  • Individual links are styled with hover effects for better user experience
.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;
    cursor: pointer;
}

.menuList {
    display: none;
    position: absolute;
    background-color: #031926;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.links {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 16px;
    border-bottom: 1px solid #444;
}

.links:hover {
    background-color: #f1f1f1;
    color: #031926;
}

.drop_btn:hover {
    background-color: #04af2f;
}

Adding Functionality with JavaScript

JavaScript handles the toggle behavior and click-outside functionality:

  • Use querySelector() to get references to the button and menu
  • Add a click event listener to toggle menu visibility
  • Implement click-outside detection to close the menu when clicking elsewhere
  • Toggle between display: none and display: block to show/hide the menu
const dropdownBtn = document.querySelector('.drop_btn');
const menuContent = document.querySelector('.menuList');

dropdownBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    if (menuContent.style.display === 'block') {
        menuContent.style.display = 'none';
    } else {
        menuContent.style.display = 'block';
    }
});

document.addEventListener('click', function(e) {
    if (!menuContent.contains(e.target) && !dropdownBtn.contains(e.target)) {
        menuContent.style.display = 'none';
    }
});

Complete Working Example

Here's the complete implementation combining all three components:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickable Dropdown Menu</title>
    <style>
        .container {
            position: relative;
            display: inline-block;
            margin: 20px;
        }
        
        .drop_btn {
            background-color: #031926;
            color: white;
            padding: 16px;
            font-size: 16px;
            font-family: Verdana, sans-serif;
            border: none;
            width: 160px;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .menuList {
            display: none;
            position: absolute;
            background-color: #031926;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .links {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        .links:hover {
            background-color: #f1f1f1;
            color: #031926;
        }
        
        .drop_btn:hover {
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <h2>Clickable Dropdown Menu Demo</h2>
    
    <div class="container">
        <button class="drop_btn">Menu ?</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>
        const dropdownBtn = document.querySelector('.drop_btn');
        const menuContent = document.querySelector('.menuList');
        
        dropdownBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (menuContent.style.display === 'block') {
                menuContent.style.display = 'none';
            } else {
                menuContent.style.display = 'block';
            }
        });
        
        document.addEventListener('click', function(e) {
            if (!menuContent.contains(e.target) && !dropdownBtn.contains(e.target)) {
                menuContent.style.display = 'none';
            }
        });
    </script>
</body>
</html>

Key Features

  • Toggle Functionality: Click the button to show/hide the dropdown menu
  • Click Outside: Menu closes automatically when clicking outside the dropdown area
  • Hover Effects: Visual feedback when hovering over button and menu items
  • Responsive Design: Adapts to different screen sizes and contexts

Conclusion

Creating a clickable dropdown menu requires combining HTML structure, CSS styling, and JavaScript interactivity. This implementation provides a clean, accessible navigation solution that enhances user experience while maintaining a organized webpage layout.

Updated on: 2026-03-15T23:18:59+05:30

15K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements