CSS 포커스 기반 드롭다운 메뉴

오늘 우리는 약간 다른 것을 만들 것입니다. 전체 CSS 기반 드롭다운 메뉴!

No JavaScript required!

버튼을 사용하고 포커스 상태에서 이 메뉴를 표시해야 하는지 확인할 것입니다.

최종 결과는 다음과 같습니다.



이 특정 자습서에서는 실제 효과에 더 집중하기 위해 Tailwind CSS를 사용하고 있습니다.

내 Tailwind article here을 찾을 수 있습니다.

HTML 구조

HTML은 navbar 컨테이너, 로고 및 오른쪽의 사용자 아이콘이 됩니다.

Tailwind는 스타일 지정을 수행하며 주로 flex를 사용하여 항목을 정렬하는 데 중점을 둡니다.

보시다시피 IDuser-menu가 있는 버튼 옆에 IDuser-menu-dropdown가 있는 div가 있습니다. 이것은 버튼에 초점을 맞추면 표시되는 드롭다운입니다.

<nav class="flex items-center justify-between h-full p-3 m-auto bg-orange-200">
  <span>My Logo</span>
  <div class="relative">
    <button id="user-menu" aria-label="User menu" aria-haspopup="true">
        <img class="w-8 h-8 rounded-full" src="https://scontent.fcpt4-1.fna.fbcdn.net/v/t1.0-1/p480x480/82455849_2533242576932502_5629407411459588096_o.jpg?_nc_cat=100&ccb=2&_nc_sid=7206a8&_nc_ohc=rGM_UBdnnA8AX_pGIdM&_nc_ht=scontent.fcpt4-1.fna&tp=6&oh=7de8686cebfc29e104c118fc3f78c7e5&oe=5FD1C3FE" />
    </button>
    <div id="user-menu-dropdown" class="absolute right-0 w-48 mt-2 origin-top-right rounded-lg shadow-lg top-10 menu-hidden">
      <div class="p-4 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <a href="#" class="block px-6 py-2 mb-2 font-bold rounded" role="menuitem">My profile</a>
        <a href="#" class="block px-6 py-2 font-bold rounded" role="menuitem">Logout</a>
      </div>
    </div>
  </div>
</nav>

포커스의 CSS 메뉴

효과를 추가하려면 버튼에 초점을 맞춰야 합니다.
그러나 먼저 드롭다운을 숨기고 작은 효과를 추가해 보겠습니다.

Note: We could use @apply, but codepen doesn't support this

#user-menu ~ #user-menu-dropdown {
  transform: scaleX(0) scaleY(0);
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transition-duration: 75ms;
  opacity: 0;
  top: 3.25rem;
}

드롭다운의 경우 변환을 추가하여 모서리에서 움직이게 한 다음 불투명도 0을 추가하여 숨깁니다.

이제 호버를 대상으로 지정해야 합니다.
#user-menu:focus를 사용한 다음 다음(~) 드롭다운을 대상으로 지정합니다.

또한 누군가가 드롭다운에서 링크를 클릭하는 경우 메뉴가 활성 상태로 유지될 수 있도록 focus-within을 추가합니다.

#user-menu ~ #user-menu-dropdown:focus-within,
#user-menu:focus ~ #user-menu-dropdown {
  transform: scaleX(1) scaleY(1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 100ms;
  opacity: 1;
}

이 Codepen에서 전체 예제를 볼 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나