이번엔 tailwindcss를 통해 드롭다운 메뉴를 만들게 되었습니다.
메뉴에 마우스를 hover시킬시 드롭다운 메뉴가 나타나는 방식으로 만들어야 합니다.
구현을 위한 몇가지 개념을 정리하고 만들어 보도록 하겠습니다.
🤓 hover
tailwind는 역시나 hover도 class를 통해 간단해게 적용할 수 있습니다. hover:bg-sky-700은 마우스 오버 시 bg가 변경되는 클래스를 적용하는 예제입니다.
<button class="bg-sky-500 hover:bg-sky-700 ...">
Save changes
</button>이러한 특성들은 스택 형태로도 나타낼 수 있습니다.
<button class="dark:md:hover:bg-fuchsia-600 ...">
Save changes
</button>👨👨👧👦 group
드롭다운을 만드려면 여러 요소들이 고려되어야 합니다. tailwind에서는 이 것을 상위 요소를 표시하는 group과 대상 요소의 스타일을 지정하는 group-{modifier}를 통해 구현할 수 있습니다.
tailwind 특성상 코드가 지저분하지만 상위 요소에 group이 지정되어 있고 하위 변화하는 요소에 group-hover:를 통해 마우스 오버시 동작하는 클래스가 있는 것을 확인하실 수 있습니다.
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
<div class="flex items-center space-x-3">
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
</div>
<p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>🧐 tailwind play 예시
예시가 잘 정리되어 있습니다. 링크에서 직접 확인해보시는걸 추천합니다. 여기서도 마찬가지로 상위 요소에 group을 준 후 적용시킬 요소에 group-hover:block을 준 것을 확인하실 수 있습니다.
<ul class="w-full flex">
<li class="px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
<li class="group relative dropdown px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide">
<a>Dropdown</a>
<div class="group-hover:block dropdown-menu absolute hidden h-auto">
<ul class="top-0 w-48 bg-white shadow px-6 py-8">
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 2</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 3</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 4</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 5</a></li>
</ul>
</div>
</li>
<li class="px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
<li class="px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
<li class="px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide lg:pr-8"><a>Non-Dropdown</a></li>
</ul>
🥳 구현
제 코드의 경우 li를 통해 만들었던지라 여기에 group을 주었습니다. 그리고 마우스 오버시 보이도록 해야하니 아래에 보일 메뉴를 div를 통해 구분 후 group-hover:block 속성을 주었습니다.
<li class="group relative dropdown">
<a class="text-lg leading-tight" href="#"
><span
class="link link-underline link-underline-black m-1 text-black"
>유아의류</span></a>
<div class="block bg-white dropdown-menu-1 group-hover:block dropdown-menu absolute hidden h-auto">
<ul>
<li><a class="block" href="#">여아</a></li>
<li><a href="#">남아</a></li>
</ul>
</div>
</li>참고로 block속성을 사용하는 이유는 hidden을 주었을때 display:none이 설정되는데 이를 무시하기 때문이라고 하네요. 다음엔 반응형도 추가해보겠습니다!
😢 메뉴 유지
구현했다고 좋아했으나 마우스를 내리면 호버로 생겨난 메뉴가 사라져 클릭을 할 수가 없네요. tailwind play 예시에서는 잘 되었었는데 왜 안되는지 봤더니 margin값을 줘서 생긴 문제였습니다. 예시처럼 padding을 통해 간격을 조정해줘야 드롭다운으로 생긴 메뉴바가 계속 유지됩니다!
참고
https://play.tailwindcss.com/YfSw9fCrxG
https://tailwindcss.com/docs/hover-focus-and-other-states
