3Depth 카테고리

기본 골격 마크업

<ul class="navigation__list navigation__listDepth1">
  <li class="navigation__item">
    <a href="/" role="button" class="navigation__button" aria-expanded="false" aria-controls="fashionClothes">
      <span class="icon-clothes"></span>패션의류
    </a>
    <ul class="navigation__listDepth2 is--active" id="fashionClothes">
      <li class="navigation__item">
        <a href="/" class="navigation__button" role="button" aria-expanded="false" aria-controls="womanFashion">
          여성패션
        </a>
        <ul class="navigation__listDepth3" id="womanFashion">
          <li class="navigation__item">
            <a href="/" class="navigation__link">의류</a>
          </li>
          <li class="navigation__item">
            <a href="/" class="navigation__link">속옷/잠옷</a>
          </li>
          <li class="navigation__item">
            <a href="/" class="navigation__link">신발</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

• 패션의류
  • 여성패션
    • 의류
    • 속옷/잠옷
    • 신발

※스크린리더 사용자를 위한 마크업

• aria-expanded 접힌 경우 false, 펼쳐진 경우 true
• 자바스크립트를 통해 동적으로 제어하는 대상에 id값을 부여하고, 컨트롤되는 대상에 aria-controls="해당 id값"을 부여합니다.
  • 현재는 1번째 뎁스에 마우스를 올리면 2번째 뎁스에 is--active클래스가 부여되므로, 2번째 뎁스의 id값을 fashionClothes루 부여한 후, 1번째 뎁스에 aria-controls="fashionClothes"를 부여한 것입니다.