Notice
Recent Posts
Recent Comments
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- IIS
- 블로그 조회수 늘리기
- 소득세
- samba
- JavaScript
- 블루수국그림
- .NET
- Adobe pdf reader
- 인테리어그림
- CVS
- flash
- HTML
- 즐겨찾기 추가
- 에덴미술
- Jrun
- oralce
- Eclipse
- MySQL
- 블로그 방문자 늘리기
- 블로그 수익화
- CSS
- 갑근세
- MSSQL
- Administrator
- Jexcel
- 국민연금
- Vista
- 블로그 조회수
- JSP
- PHP
Archives
- Today
- Total
I LOVE EJ
CSS Tab Navigation + List Item Navigation. 본문
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/
'Web publishing > jQuery' 카테고리의 다른 글
| jQuery.touchSlider (1) | 2013.05.30 |
|---|---|
| 눈여겨 볼만한 jQuery 플러그인 (0) | 2013.05.07 |
| jQuery 1.4 추가사항 - .focusin(), .focusout() (0) | 2013.03.28 |
| [jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제. (0) | 2013.03.26 |
| [Jquery] Show each Easing Method (0) | 2013.03.26 |