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 사용.
아.. 멋지네요 :D
늘 좋은 자료 감사한 마음으로 잘 활용하고 있습니다!
@Espressivo
좋은 아침 입니다. ^^ 사용해 보시고 개선점이 있으면 피드백 부탁 드립니다. ^^
급 질문(접근성을 하도 많이 하다보니..;;)
저도 저런 탭은(메인에 많은 탭) 스크립트가 꺼도 안펼펴지게 만들고 있긴한데요.
(링크만 돼고 이동)
어떠한 경우에는 스크립트가 꺼지면 펼쳐서 만들어야 하는 경우도 많더라구요.
서브 메뉴에서는 어차피 늘어 나도 컨텐츠부분이 깨지지않고 늘어 나므로 상관이
없는데.
메인같은 곳에서는 위 같은 경우의 탭은 펼쳐지게 돼면 메인에서는 레이아웃이 깨질확률 떄문에 안펼치는건지요? .
(항상 메인 할떄는 조심스러워지더라구요;;)
Tab 할 때는 다음과 같은데
[대메뉴1] → [소메뉴1] → [소메뉴2] → [대메뉴2] → [소메뉴3] → …
Shift + Tab할 때는
[대메뉴1] ← [대메뉴2] ← [소메뉴3]
이렇게 되어서 같은 데이터를 탐색한다는 느낌이 들지 않는 것 같아요. 이런 것이 를 해치지는 않나요?
@김정수
저는 자바스크립트를 겸손하게 사용해야 한다는 것에는 동의하지만 자바스크립트가 존재하지 않는 상황을 가정하지는 않습니다. 자바스크립트가 제한된 상황은 보통 CSS도 함께 끈 상태이므로 그런 노력이 큰 의미는 없다고 생각합니다.
@이흥섭
그렇지. 역순으로 탐색할 때에는 흘러온 순서와 일치하지 않지. 하지만 그게 비 논리적이라거나 혼란을 유발하지는 않는다고 생각해. 왜냐하면 역순으로 탐색 하더라도 논리적인 순서 자체는 변함이 없고 단지 탐색할 때 하위 항목을 건너 뛰었다는 것인데 이것은 누구나 어렵지 않게 파악할 수 있다는 거지. ‘해명자료’ 탭에서 ‘보도자료’ 탭으로 역순으로 넘어 갈 때 이것을 논리적이지 않다고 말하기는 어려울 것 같은데. 그리고 ‘굳이 그럴 필요 있을까’ 라는 생각이 들기는 하지만 역순으로 탐색할 때에도 동일한 순서를 제공할 수 있다면 그렇게 하는 것도 나쁘지 않다고 생각해.
[...] CSS Tab Navigation + List Item Navigation. [...]
이건 어떻게 사용할수있는건가요? 사용하고싶은데…어떤식으로 가져가서 사용할 수 있는지 방법을 모르겠어요…;;
소스를 가져가는건가요?그렇다면 소스는 어디에..?;;
@모르겠어요.
‘예제를 새 창으로 보기’ 링크를 누르신 다음 웹 브라우저의 ‘보기>소스보기’ 메뉴를 이용 하세요. 그러면 HTML 소스가 보이실껍니다. HTML 소스는 그렇게 복사해서 가져가시면 되구요. HTML 소스 안에서 CSS/JS 파일 링크를 찾으신 다음 해당 파일을 웹 브라우저로 열고 ‘다른 이름으로 저장’ 하시면 됩니다.
아아..감사합니다..정말..님은 천재예요…님 덕분에 좋아하지않았던 nhn 이미지도 좋아지는군요..님같은 멋진 분들이 많이 일하는 곳이겠죠? 잘쓰겠습니다!!!
막무가네 질문으로 받아드릴수 있지만…너무 궁금해서요..
저렇게 탭을 구현할때 탭의 목록을 이미지로 변경 되게 되는 jquery관련된 정보 아시는곳이
있나요?
구글링을 해봐도…백그라운드 변경되는 정도인데…
기존 자바스크립트 사용할때 처럼 목록 자체가 이미지로 만들어 놓았다면….어떻게 수정을 해야 할지 몰라서요^^:.
@윤군
이미지로 처리된 메뉴일 때 자바스크립트 소스를 수정할 필요가 없습니다.
text 자리에 img 요소를 넣고 CSS를 수정해서 ‘보더, 패딩, 마진’ 정도만 수정하면 어렵지 않게 이 소스코드를 그대로 사용할 수 있습니다.
ㅎㅎ 탭선택시 이미지 변화에 대해서는 스크립트를 수정해 줘야 하지 않나요?
평소 탭 이미지가 회색그라데이션에 검정 글씨였다가 선택시 파랑 그라데이션에 흰 글씨로
변화 되는 그런 이미지 변화가 있는 탭메뉴 에 대해 궁금해서요^^:
음 제가
이런 식으로 코딩하니까 되긴 하던데..이런식의 마크업도 괜찮은 건지요^^:
경험이 거의 전무하여…자꾸 질문만 드립니다^^:
[img src="tit_not01_on.gif" onclick="this.src='tit_not01_off.gif'" onmouseout="this.src='tit_not01_on.gif'"]
@윤군
네, 마우스 오버시 이미지를 바꿔주는 방법도 괜찮은 방법 입니다. 추가적으로 alt 속성으로 대체 텍스트만 잘 작성해 준다면 접근성이 확보 됩니다. 일단은 이것 만으로도 충분 합니다.
그러나 저라면 더 좋은 성능을 낼 수 있도록 개선 하겠습니다. 평소 이미지와 롤 오버 이미지가 두 개로 쪼개져 있습니다. 만약 메뉴 이름이 10개라면 메뉴 이미지는 20조각이 되겠네요. 이렇게 되면 http 요청 횟수가 늘어나기 때문에 웹 페이지 로딩 성능에 좋지 않습니다. 저라면 모든 메뉴 이름과 롤 오버 상태를 하나의 이미지로 처리 할 것입니다. 이런 방법이 바로 sprite 기법 입니다. sprite 기법은 통상 IR(Image Replacement) 기법과 함께 사용 됩니다.
IR(Image Replacement) 기법이란 무엇입니까?
http://naradesign.net/open_content/lecture/wp/#section20
Image Sprite 기법이란 무엇입니까?
http://naradesign.net/open_content/lecture/wp/#section21
IR 기법과 sprite 기법을 사용해서 이미지는 통으로 병합하고 CSS 배경으로 처리할 것입니다. 물론 전경에는 대체 텍스트가 반드시 존재해야 하구요.
단, IR 기법은 조심 스럽게 사용하는 것이 좋습니다. 전경 텍스트 콘텐츠를 display:none 으로 숨겨버리면 화면 낭독기가 텍스트 노드에 접근하지 못해서 접근성이 훼손 됩니다.
^^ 덕분에 좋은 정보 알아갑니다.
감사합니다 ~~ 바쁘실텐데
List Item Navigation 을 저희 웹사이트에 적용해보았습니다.
IE6,7 에서 처음 접속시 깨져보이는 현상이 있습니다.
어떻게 수정해야 할까요??? ^^;;; 실력이 미천하여 스스로 해결하지 못하고 있는 중입니다.
@전강훤
그 문제와 관련하여 아래 댓글을 참고해 보세요.
http://naradesign.net/wp/2010/03/15/1225/#comment-49994
^^ 감사합니다~
안녕하세요,,, 댓글 다신 분들 내용 참고해서 탭 메뉴 활용해서 쓰려는데요..
소스보기에서 css 가져오기까지 성공했는데… 님의 결과물처럼 탭으로 나오지 않고..
쭉~ 박스들로만 나오는데 어떻게 하면 되는건가요…
js 도 가져가야 하는건지…
요건 어디서 받을수있나요..
잘몰라서요.. 자세한 답변 부탁드립니다…
꼭 요 메뉴 사용해보고 싶습니당.. ㅠㅠ
@김군
js 파일도 당연히 가져가셔서 html 문서가 참조할 수 있도록 링크해야 합니다.
소스코드 하단(body가 끝나기 직전)에 보시면 다음과 같은 코드가 있습니다.
[script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"][/script]
[script type="text/javascript" src="listTab.js"][/script]
이 두 개의 스크립트가 참조하는 src 경로의 js 파일을 내려받아서 김군님의 로컬 또는 서버에 업로드 하신 다음 src 속성이 올바른 경로를 참조할 수 있도록 경로를 변경해 주시면 됩니다.
좋은자료들 늘 눈팅하면서 잘보고있습니다 .
따라 만들어보다가 질문사항이 생겨서 여쭤보려고합니다 ;
tab 메뉴를 클릭했을시에 화면 위치가 자동으로 최상단으로 이동하는건
어떻게 좀 바꿀수있나요 ?
List Item Navigation
예제의 경우 ie6에서 더보기가 우측으로 고정되지 않고 탭을 누를때 마다 위치가 바뀝니다.
css사용, 미사용 버튼을 쓰지 않을 경우 css, js파일에서 빼야할 부분을 ^^; 알려 주시면 감사하겠습니다. 모든 브라우저에서 크로스 브라우징이 되는데 ie6에서만 계속적으로 버그가 발생하네요.
@홈박스
일단 IE6 에서는 아래 ul 선택자의 width 값을 px 으로 지정하면 문제가 해결 됩니다.
다른 방법을 찾으시면 제게도 알려 주세요.
.listTab li ul { … }
CSS 사용, 미사용 버튼을 위한 CSS/JS 파일은 별도로 존재하지 않습니다.
그냥 버튼만 지우시면 됩니다.
가로넓이를 px로 주어서 해결은 되었어요~ 애를 먹었네요. ㅋㅋ 고맙습니다.
자주 도움 받고있어요
@홈박스
저도 나중에 도움좀 주세요. ㅋㅋ
List Item Navigation에 리스트 우측에 날짜를 넣고 싶은데 잘 안되네요…ㅜ.ㅜ
방법을 좀 알려주세요…..
@손군
날짜가 사용되는 경우가 많으니 예제에 추가 했습니다. 예제를 다시 확인해 보세요. 고맙습니다. ^^
안녕하세요. 항상 좋은 정보만 보고가다가 처음으로 질문남겨봅니다.
http://218.234.19.188:9004/index.asp
에 리스트탭을 적용시켜보았는데요.
이미지로 대체를 해놓았는데
오버했을때까지는 해결을 했는데 어떻게해야 선택되었을때 이미지가 바뀔까요? ㅜㅜ…
@유령신부
제가 한것과 마크업 구조가 달라서 그렇습니다.
저는 ul 바깥쪽에 div를 하나 더 사용했고 lisTab 이라는 클래스를 주었는데요.
HTML 구조와 클래스 이름을 동일하게 맞추신 다음 다시 한번 테스트 해보시겠어요? ^^
정찬명님 답변 감사합니다.
마크업을 똑같이 해놨었는데 개발자분에게 해달라고 하니 임의로 바꿔서 다른스크립트로 처리해주셨어요…
그래도 꼭 응용해보고 싶어서 또 다른곳에 응용했답니다.
http://218.234.19.188:9004/designer/designer_view.asp
이번엔 여기 응용해서 잘사용하고 있어요^^
그런데 각각 탭하단의 내용들이 li가 아니고 div로 감싼것들이라
높이값이 변하지않고 footer위로 넘치더라고요…그래서 그냥 무작정 js의 높이값을 지정해줘버렸답니다…
ㅜㅜ무지해서…이게 제한계인가봐용…
(js에선 li ul li의 갯수에 따라 높이값이 변하는것같던데…
맞게 해석했나 모르겠네요…)
오늘도 정찬명님의블로그에서 열심히 정보캐갑니다^^항상 고맙습니다.
클릭말고 마우스오버시 탭이 바뀌게 되는방법으로 올려주시면 안될까요??
ㅠㅠ
@유령신부
마지막 예제 ‘List Item Navigation’은 항목의 갯수에 따라서 감싸고 있는 .listTab 요소의 높이가 달라지도록 구현되어 있습니다. 물론 참고 하셨겠지만 잘 살펴보시면 비슷하게 적용하실 수 있으실꺼예요. ^^
@자바스크립트
.click 이라고 작성된 부분을 .mouseover로 바꿔보시면 되지 않을까요? ^^
ie6에서 listTab 을 적용시키면 제목과 시간이 한줄로 붙어서 출력이 됩니다.
7도 동일하고.. 8과 그외 브라우저에서는 타이틀은 << 좌측으로 안의 부분은 우측으로 정렬되는데 ie6과 7에서만 한 줄로 붙는 이유는 도대체 뭔지 알수가 없네요…
css안에
.listTab li li time,
.listTab li li time. {…} 부분을 이리 저리 수정해 보곤 있는데 쉽지 않네요..
작은 도움을 주시면 정말 감사하겠습니다 ㅠ
@문경록
말씀하신 내용만 듣고는 문제를 파악할 수 없습니다. 문제 상황을 볼 수 있는 페이지를 알려주시면 확인해 보겠습니다.
// 댓글 남겨주셔서 감사합니다^^;; ie6에서 여러 저러 방법을 시도해 보다가 결국은 웹표준과는 동떨어지게 노가다로 처리했습니다 ㅠㅠ 처음엔 ie6을 배제하고 쉽게 쉽게 작업하다가 뒤늦게 ie6에서도 동일하게 나오도록 수정작업거치면서 표준을 많이 날려먹었습니다 ㅠ
안녕하세요.
List Item Navigation 을 페이지에 적용하려고 하는데요.
탭을 마우스 클릭할시에 페이지(첫페이지 / 페이지업)이 되더군요.
[a href="#"] 로 인해서 동작이 되서 그런거 같은데요.
탭메뉴 클릭하면서 계속 자동으로 보던 페이지가 위로 스크롤이 올라가면
안될듯한데 다른 대안은 없지요?
@윤승현
listTab.js 파일의 10번째 라인에 return false; 를 추가해 주시면 됩니다. 예제를 업데이트 했습니다.
메뉴가 이미지이고 활성화/비활성화 이미지로 변경되는 경우는 어떻게 해야될까요.
아무리 찾아봐두 그런 라이브러리는 없는거 같은데 실제로는 네비게이션 같은경우는
그렇게 많이들 해서요.
@야간비행
방법이 여러가지 있을텐데요. 저는 보통 하나의 이미지에 활성/비활성 이미지를 모두 머지해서 CSS 배경이미지로 사용하고 문맥에 따라 backgrund-position을 바꾸는 방법을 사용합니다. http://xpressengine.com/ 사이트의 글로벌 네비게이션이 이런 방식으로 제작되었구요. 이미지로 처리된 것들은 재사용하기 불편해서 라이브러리로 만드는 사람이 드물껍니다.
안녕하세요?
위의 예제중에 Faced Tab Navigation으로 메뉴 구성을 해보았습니다.
원프레임 페이지에 적용하였는데 문제점 하나가 생겨서 질문해봅니다.
최초 메인일 경우 초기에 선택되어지고 예제대로만 하면 문제가 없으나
다른 페이지로 이동시 새로고침이나 이런 부분이 있으면 현재 탐색 중인 페이지에 해당
하는 메뉴가 그대로 표시되길 원하는데 위의 예제에 a태그에 링크를 걸고 페이지 이동을
시키면 탭메뉴가 초기 설정한 부분으로 돌아가 버립니다.
a b c 라는 메뉴에 하위메뉴 각 3개씩 있다가 가정하면
제가 b메뉴의 3번 하위 메뉴에서 c메뉴의 2번 하위메뉴로 이동시 탭메뉴가 초기 설정한대로
첫번째 탭의 첫번째 하위메뉴를 표시하고 있습니다.
현재 이동한 페이지의 메뉴가 표시되게 할 순 없을까요?
구글링하면 쿠키이용한 예제가 있던데 위의 예제에 적용할 방법은 없나요?
@오민호
현재 페이지의 위치를 메뉴에 반영하는 일은 서버측 스크립트가 해야할 일이라고 생각합니다. facedTab 클래스와 함께 포함되어 있는 m1 s1 클래스 이름을 서버측 스크립트가 바꿔주어야 한다는 의미 입니다. 클라이언트측에서는 적당한 클래스 이름과 화면 표시 방법을 제공하는 선에서 의무를 다 한 것이라 생각하고요. 그 이상은 서버측 스크립트로 처리해야 옳다고 생각합니다. A 에서 B 으로 페이지가 전환했다는 것을 클라이언트측 스크립트가 알기는 어렵지만 서버측 스크립트는 알 수 있으니까요.
수직형으로 펼쳐지는 소스는 없나요 ㅠ;;
수직형이 좋다고하셔서..ㅎㅎ
쟁애인 이용을 위해 접근성을 고려하여 사이트를 제작중인데 접근성에 문제가 없는것죠? ㅎㅎ
@딸기
제 블로그에서 ‘수직’으로 검색해 보세요. 접근성에 문제가 없도록 제작했지만 결함이 있을 수 있고 응용하는 과정에서 접근성 문제가 생길 수 있습니다.
소스보기해서, 사용하려고하는데;; ID 값이 “tab line jx” 이름때문인지, 스타일이 적용이 되질 않네요… 저만 이상한건가요? 다른분들은 잘 쓰신다는거 같은데;; 아직 초짜라…
.. .
@Kawkujini
tab line jx 는 클래스 값입니다. jx 값은 자바스크립트 동작 환경에서는 빠지는 값이기 때문에 jx 값을 지우고 테스트 해보세요. 이 예제들은 자바스크립트 지원 환경과 미 지원 환경일 때 서로 다른 UI를 보여주도록 제작했기 때문에 jx 클래스가 있을 때와 없을 때 뷰가 다릅니다.
tab.js 은 어디서 받아야하죠.. 저는 왜.. 쭉 나열 될까요… 좋은정보를 알아도 써먹지 못하는…. ㅠㅠ
tab.js tab.css 는 어디서 받아야하죠.. 저는 왜.. 쭉 나열 될까요… 좋은정보를 알아도 써먹지 못하는…. ㅠㅠ
@rainsmell
페이지 소스보기 하면 css, js 파일 경로가 보일텐데요.
정말 유용한 정보인것 같아요 ㅜ
요즘 웹표준 공부하고 있는데 도움이 많이 되요 ㅎㅎ
감사합니다 ㅎㅎ
안녕하세요
혹시 익스플로어 9에서 안되시는분 계신가요?
다른 브라우저에서 너무나 잘 되서 의심없이 확인을 안했더니
익스 9에서 탭이 모두 펼쳐져 보이네요.
수정하신 분들이 있으시면 방법 알려주세요~
@김진영
저는 IE9에서 잘 보이는데요. 위 예제도 그렇게 보이시나요?
음. 제가 실수를 했어요.
전 8을 쓰는데 ietester로 확인하니
제가 작업한것과 여기 예제 모두 다 펼쳐져 보이더라구요.
게다가 9 쓰는 사람에게 예전에 작성했던거 제대로 보였냐니까
다 펼쳐서 보였다고 해서
그런줄 알고 있었어요. ㅠㅠ
어제오후에 다른 사람이 확인해줘서 알았어요.
죄송합니다~
@김진영
덕분에 IE8 사용자의 IEtester 문제를 알게 됐네요. 알려주셔서 고맙습니다.