안녕하세요 오늘은 Tailwind로 드롭박스에 서브 메뉴를 구현해보겠습니다.
실행 결과는 다음과 같습니다.
위와 같이 구현하기 위해서는 다음과 같이 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Dropdown Menu with Submenu Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.21/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">
<div class="relative">
<button id="dropdownButton" class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none">메뉴</button>
<div id="dropdownContent" class="hidden absolute w-48 bg-white rounded shadow mt-2">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100 focus:bg-blue-100">링크 1</a>
<div class="dropdown relative">
<a href="#" class="dropdown-link block px-4 py-2 text-gray-800 hover:bg-blue-100 focus:bg-blue-100">링크 2 - 서브메뉴</a>
<div class="dropdown-menu hidden absolute left-full top-0 w-48 bg-white rounded shadow ml-2">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">서브링크 1</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">서브링크 2</a>
</div>
</div>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100 focus:bg-blue-100">링크 3</a>
</div>
</div>
</body>
<script>
const dropdownButton = document.getElementById('dropdownButton');
const dropdownContent = document.getElementById('dropdownContent');
const submenus = document.querySelectorAll('.dropdown');
dropdownButton.addEventListener('click', function() {
dropdownContent.classList.toggle('hidden');
});
submenus.forEach(submenu => {
submenu.addEventListener('mouseenter', () => {
submenu.querySelector('.dropdown-menu').classList.remove('hidden');
});
submenu.addEventListener('mouseleave', () => {
submenu.querySelector('.dropdown-menu').classList.add('hidden');
});
});
window.addEventListener('click', function(e) {
if (!dropdownButton.contains(e.target) && !dropdownContent.contains(e.target)) {
dropdownContent.classList.add('hidden');
submenus.forEach(submenu => {
submenu.querySelector('.dropdown-menu').classList.add('hidden');
});
}
});
</script>
</html>