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>
ファッション
女性ファッション
に服を着せる
下着/パジャマ
名靴
※スクリーンリーダーユーザーの表示
<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、展開truearia-controls="해당 id값"
を付与する.aria-controls="fashionClothes"
を1番目の深さ画像にサスペンションする.Reference
この問題について(HTML/CSS]3 Depthカテゴリ), 我々は、より多くの情報をここで見つけました https://velog.io/@0seo8/HTMLCSS-3Depth-카테고리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol