JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sub-menu">
        <div class="sub-menu-main" id="sub-menu-main">
            <select id="main-menu-select">
                <option value="회사소개">회사소개</option>
                <option value="서비스">서비스</option>
                <option value="개발">개발</option>
                <option value="문의">문의</option>
            </select>
        </div>
        <div class="sub-menu-sub" id="sub-menu-sub">
            <select id="sub-menu-select">
                <!-- Submenu options will be dynamically loaded here -->
            </select>
        </div>
    </div>

    <div id="content">
        <!-- Content will be dynamically loaded here -->
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
}

.sub-menu {
    display: flex;
    background-color: #f9f9f9;
    padding: 10px;
    margin-top: 20px;
}

.sub-menu-main,
.sub-menu-sub {
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: white;
}

#main-menu-select,
#sub-menu-select {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
}

#sub-menu-sub {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.sub-menu-sub.open {
    display: block;
    max-height: 500px; /* A sufficiently large value to ensure the dropdown is fully visible */
    opacity: 1;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const mainMenuSelect = document.getElementById('main-menu-select');
    const subMenuSelect = document.getElementById('sub-menu-select');
    const subMenuSubContainer = document.getElementById('sub-menu-sub');

    const menuData = {
        "회사소개": {
            "인사말": "#",
            "조직도": "#"
        },
        "서비스": {
            "서비스 1": "#",
            "서비스 2": "#"
        },
        "개발": {
            "개발 1": "#",
            "개발 2": "#",
            "개발 3": "#"
        },
        "문의": {
            "": "#"
        }
    };

    mainMenuSelect.addEventListener('change', () => {
        const selectedMain = mainMenuSelect.value;
        loadSubMenuOptions(selectedMain);
        const firstSubMenu = Object.keys(menuData[selectedMain])[0] || null;
        if (firstSubMenu) {
            setTimeout(() => {
                window.location.href = menuData[selectedMain][firstSubMenu];
            }, 500); // Wait for the dropdown animation to complete before redirecting
        } else {
            loadContent(selectedMain, null);
            window.location.href = menuData[selectedMain][""];
        }
    });

    subMenuSelect.addEventListener('change', () => {
        const selectedMain = mainMenuSelect.value;
        const selectedSub = subMenuSelect.value;
        window.location.href = menuData[selectedMain][selectedSub];
    });

    function loadSubMenuOptions(mainMenu) {
        subMenuSelect.innerHTML = '';
        const options = menuData[mainMenu];
        if (options && Object.keys(options).length > 0) {
            Object.keys(options).forEach(option => {
                if (option) {
                    const opt = document.createElement('option');
                    opt.value = option;
                    opt.innerText = option;
                    subMenuSelect.appendChild(opt);
                }
            });
            subMenuSubContainer.classList.add('open');
        } else...