관리 메뉴

I LOVE EJ

CSS Tab Navigation + List Item Navigation. 본문

Web publishing/jQuery

CSS Tab Navigation + List Item Navigation.

BeOne 2013. 3. 28. 15:18

HTML/CSS와 jQuery를 이용하여 비교적 단순하지만 상당히 빈번하게 사용되는 Tab Navigation을 마크업 했습니다. 선으로 처리된 탭, 면으로 처리된 탭, 최근 게시물을 보여주는 목록 아이템 형태의 탭 디자인 입니다. 

Lined Tab Navigation

Faced Tab Navigation

List Item Navigation

Tab Navigation 예제의 특징

  • 중첩 목록(ul>li>ul>li)을 이용한 탭 네비게이션 예제.
  • 목록의 계층 구조가 논리적으로 마크업 되어 있다.
  • 키보드만으로도 접근이 가능하고 키보드 접근 순서가 논리적으로 처리되어 있다.
  • jQuery 사용.

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.List Item Navigation : 예제를 새 창으로 보기



출처 : http://naradesign.net/wp/2010/03/11/1216/