HTML/CSS와 jQuery를 이용하여 비교적 단순하지만 상당히 빈번하게 사용되는 Tab Navigation을 마크업 했습니다. 선으로 처리된 탭, 면으로 처리된 탭, 최근 게시물을 보여주는 목록 아이템 형태의 탭 디자인 입니다.
Lined Tab Navigation
Faced Tab Navigation
List Item Navigation
Tab Navigation 예제의 특징
- 중첩 목록(ul>li>ul>li)을 이용한 탭 네비게이션 예제.
- 목록의 계층 구조가 논리적으로 마크업 되어 있다.
- 키보드만으로도 접근이 가능하고 키보드 접근 순서가 논리적으로 처리되어 있다.
- jQuery 사용.