CSS만 액세스할 수 있는 드롭다운 탐색 메뉴

This is the seventh post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

Accessibility update - 08/18/20: A huge thanks to of Deque (and creator of the excellent resource a11ysupport.io) for testing the original solution across various assistive technology. The CSS-only method needs some Javascript to fully meet WCAG 2.1. In particular, javascript needs to be used to offer a non-mouse/non-tab way to dismiss the menu (think escape key) to meet success criteria 1.4.13. Michael pointed to this WAI-ARIA Authoring Practices demo which provides more info on the necessary Javascript features. These are highly recommended additions for your final production solution.

Sass의 중첩 구문 기본 탐색 HTML

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="#">About</a></li>
    <li class="dropdown">
    <!-- aria-expanded needs managed with Javascript -->
      <button type="button" class="dropdown__title" aria-expanded="false" aria-controls="sweets-dropdown">
        Sweets
      </button>
      <ul class="dropdown__menu" id="sweets-dropdown">
        <li><a href="#">Donuts</a></li>
        <li><a href="#">Cupcakes</a></li>
        <li><a href="#">Chocolate</a></li>
        <li><a href="#">Bonbons</a></li>
      </ul>
    </li>
    <li><a href="#">Order</a></li>
  </ul>
</nav>

As noted by Michael, use of a button element also allows Dragon Naturally Speaking users to say something like 'click button' to open the menu.

초기 탐색 스타일

nav {
  background-color: #eee;
  padding: 0 1rem;
  display: grid;
  place-items: center;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;

    li {
      padding: 0;
    }
  }

}

nav {
  // ...existing styles

  > ul {
    grid-auto-flow: column;

    > li {
      margin: 0 0.5rem;
    }
  }
}

// Clear native browser button styles
.dropdown__title {
  background-color: transparent;
  border: none;
  font-family: inherit;
}

nav {
  > ul {

    > li {
      // All links contained in the li
      a,
      .dropdown__title {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        color: blue;
        font-size: 1.125rem;
      }

      // Only direct links contained in the li
      > a,
      .dropdown__title {
        padding: 1rem 0.5rem;
      }

    }
  }
}

기본 드롭다운 스타일

.dropdown {
  position: relative;

  .dropdown__menu {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
    padding: 0.5em 0;
    min-width: 15ch;

    a {
      color: #444;
      display: block;
      padding: 0.5em;
    }
  }
}

.dropdown__menu {
  // ... existing styles

  position: absolute;

  // Pull up to overlap the parent list item very slightly
  top: calc(100% - 0.25rem);
  // Use the left from absolute position to shift the left side
  left: 50%;
  // Use translateX to shift the menu 50% of it's width back to the left 
  transform: translateX(-50%);
}

드롭다운 디스플레이 유형

포커스

.dropdown__menu {
  // ... existing styles
  transform: rotateX(-90deg) translateX(-50%);
  transform-origin: top center;
  opacity: 0.3;
}

.dropdown__menu {
  // ... existing styles
  transition: 280ms all ease-out;
}

.dropdown {
  // ... existing styles

  &:hover,
  &:focus-within {

    .dropdown__menu {
      opacity: 1;
      transform: rotateX(0) translateX(-50%);
      visibility: visible;
    } 

  }

}

.dropdown__menu {
  // ... existing styles
  transition: 280ms all 120ms ease-out;
}

.dropdown {
  // ... existing styles

    .dropdown__title {
      display: inline-flex;
      align-items: center;

      &:after {
        content: "";
        border: 0.35rem solid transparent;
        border-top-color: rgba(blue, 0.45);
        margin-left: 0.25em;
        transform: translateY(0.15em);
      }
    }

}