HTML/CSS]3 Depthカテゴリ

11305 ワード

3 Depthカテゴリ


既定のスケルトン寸法

<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
  • JavaScriptにより動的制御の対象にid値を付与し、制御対象にaria-controls="해당 id값"を付与する.
  • 現在、マウスが1番目の深さ画像にサスペンションされている場合、2番目の深さ画像にis-activeクラスが付与されるので、2番目の深さ画像のid値をfashionClothesに付与し、aria-controls="fashionClothes"を1番目の深さ画像にサスペンションする.