Modern Dropdown Menu with Smart Positioning

Explore how to create an advanced dropdown menu that automatically positions itself based on the available screen space. This example includes smooth transitions, proper event management, and responsive design principles. The menu intelligently detects viewport boundaries and adjusts its position for optimal visibility.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown Menu - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="web-dropdown-container">
        <div class="web-dropdown-row">
            <a href="#">DEMO 01</a>
            <a href="#">DEMO 02</a>
            <a href="#">DEMO 03</a>
            <a href="#">DEMO 04</a>
            
            <div class="web-dropdown-box">
                <a href="#" class="web-dropdown-button" onclick="toggleDropdown(event)">Menu &#9662;</a>
                <div class="web-dropdown-content" id="dropdownMenu">
                    <h1>What is Lorem Ipsum?</h1>
                    <p>Lorem Ipsum is dummy text used in typesetting and the printing industry.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
        
                    

                        :root {
    --accent-color: var(--accent, #007bff);
    --border-color: var(--border, #e2e8f0);
    --card-bg: var(--card, #ffffff);
    --text-color: var(--fg, #1e293b);
}

.web-dropdown-container {
    width: 100%;
    padding: 30px 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg, #f8fafc);
    min-height: 250px;
}

.web-dropdown-container *, 
.web-dropdown-container *::before, 
.web-dropdown-container *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Modern, clean navbar wrapper */
.web-dropdown-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 700px;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 30px; /* Rounded modern row */
    background-color: var(--card-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.web-dropdown-row a,
.web-dropdown-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    width: 130px;
    height: 42px;
    margin: 5px;
    border: none;
    background-color: transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--fg, #333);
    -webkit-text-fill-color: var(--fg, #333);
}

.web-dropdown-row a:hover,
.web-dropdown-button:hover {
    background-color: rgba(0, 123, 255, 0.08);
    color: var(--accent-color);
}

/* Special style for the dropdown button to make it stand out */
.web-dropdown-button {
    background-color: var(--accent-color);
}

.web-dropdown-button:hover {
    background-color: #0056b3;
    color: var(--fg, #333);
    -webkit-text-fill-color: var(--fg, #333);
}

.web-dropdown-box {
    position: relative; /* Crucial for absolute positioning of the content */
    margin: 5px;
}

/* The dropdown menu window itself */
.web-dropdown-content {
    position: absolute; /* Fixed from fixed to absolute! */
    display: none;
    width: 280px;
    padding: 18px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.web-dropdown-content h1 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.web-dropdown-content p {
    font-size: 0.88rem;
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.5;
}

@media screen and (max-width: 576px) {
    .web-dropdown-row {
        border-radius: 16px;
        padding: 10px;
    }
    .web-dropdown-row a, .web-dropdown-button {
        width: 100%;
        height: 40px;
    }
    .web-dropdown-content {
        width: 100%;
        position: static; /* On mobile, it expands within the normal page flow */
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,0.02);
    }
}
        
                    

                        // 1. CRUCIAL: We expose the toggleDropdown function to the global "window" object!
window.toggleDropdown = function(event) {
    event.preventDefault();
    const dropdownMenu = document.getElementById("dropdownMenu");
    const dropdownButton = event.currentTarget;

    if (!dropdownMenu || !dropdownButton) return;

    if (dropdownMenu.style.display === "block") {
        dropdownMenu.style.display = "none";
        return;
    }

    // Display it immediately
    dropdownMenu.style.display = "block";

    // Since it is now position: absolute inside .web-dropdown-box (which is relative),
    // we easily position it right under the button (no need for scrollY calculation!)
    dropdownMenu.style.top = dropdownButton.offsetHeight + 6 + "px";
    
    // Calculate the right edge to prevent overflow off the screen on tablets
    const rect = dropdownButton.getBoundingClientRect();
    if (rect.left + dropdownMenu.offsetWidth > window.innerWidth) {
        dropdownMenu.style.right = "0px";
        dropdownMenu.style.left = "auto";
    } else {
        dropdownMenu.style.left = "0px";
        dropdownMenu.style.right = "auto";
    }
}

document.addEventListener("DOMContentLoaded", function() {
    // Log clicks for demo purposes
    const links = document.querySelectorAll('.web-dropdown-row a:not(.web-dropdown-button)');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            console.log("Clicked on: " + this.textContent.trim());
        });
    });

    // Close the menu when clicking anywhere outside of it
    document.addEventListener("click", function(e) {
        const menu = document.getElementById("dropdownMenu");
        const btn = document.querySelector(".web-dropdown-button");
        if (menu && menu.style.display === "block" && !menu.contains(e.target) && e.target !== btn) {
            menu.style.display = "none";
        }
    });
});
        
                    

RESULT