NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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 페이지에 링크되어 있습니다.

분류: CSS,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2010년 3월 11일, 21:54 | 정찬명 | 댓글: 93개 |
트랙백URI - http://naradesign.net/wp/2010/03/11/1216/trackback/

93개의 댓글이 있습니다.

  1. Espressivo 댓글:

    아.. 멋지네요 :D
    늘 좋은 자료 감사한 마음으로 잘 활용하고 있습니다!

  2. 정찬명 댓글:

    @Espressivo
    좋은 아침 입니다. ^^ 사용해 보시고 개선점이 있으면 피드백 부탁 드립니다. ^^

  3. 김정수 댓글:

    급 질문(접근성을 하도 많이 하다보니..;;)
    저도 저런 탭은(메인에 많은 탭) 스크립트가 꺼도 안펼펴지게 만들고 있긴한데요.
    (링크만 돼고 이동)
    어떠한 경우에는 스크립트가 꺼지면 펼쳐서 만들어야 하는 경우도 많더라구요.

    서브 메뉴에서는 어차피 늘어 나도 컨텐츠부분이 깨지지않고 늘어 나므로 상관이
    없는데.
    메인같은 곳에서는 위 같은 경우의 탭은 펼쳐지게 돼면 메인에서는 레이아웃이 깨질확률 떄문에 안펼치는건지요? .
    (항상 메인 할떄는 조심스러워지더라구요;;)

  4. 이흥섭 댓글:

    Tab 할 때는 다음과 같은데
    [대메뉴1] → [소메뉴1] → [소메뉴2] → [대메뉴2] → [소메뉴3] → …

    Shift + Tab할 때는
    [대메뉴1] ← [대메뉴2] ← [소메뉴3]

    이렇게 되어서 같은 데이터를 탐색한다는 느낌이 들지 않는 것 같아요. 이런 것이 키보드만으로도 접근이 가능하고 키보드 접근 순서가 논리적으로 처리되어 있다.를 해치지는 않나요?

  5. 정찬명 댓글:

    @김정수
    저는 자바스크립트를 겸손하게 사용해야 한다는 것에는 동의하지만 자바스크립트가 존재하지 않는 상황을 가정하지는 않습니다. 자바스크립트가 제한된 상황은 보통 CSS도 함께 끈 상태이므로 그런 노력이 큰 의미는 없다고 생각합니다.

  6. 정찬명 댓글:

    @이흥섭
    그렇지. 역순으로 탐색할 때에는 흘러온 순서와 일치하지 않지. 하지만 그게 비 논리적이라거나 혼란을 유발하지는 않는다고 생각해. 왜냐하면 역순으로 탐색 하더라도 논리적인 순서 자체는 변함이 없고 단지 탐색할 때 하위 항목을 건너 뛰었다는 것인데 이것은 누구나 어렵지 않게 파악할 수 있다는 거지. ‘해명자료’ 탭에서 ‘보도자료’ 탭으로 역순으로 넘어 갈 때 이것을 논리적이지 않다고 말하기는 어려울 것 같은데. 그리고 ‘굳이 그럴 필요 있을까’ 라는 생각이 들기는 하지만 역순으로 탐색할 때에도 동일한 순서를 제공할 수 있다면 그렇게 하는 것도 나쁘지 않다고 생각해.

  7. […] CSS Tab Navigation + List Item Navigation. […]

  8. 모르겠어요. 댓글:

    이건 어떻게 사용할수있는건가요? 사용하고싶은데…어떤식으로 가져가서 사용할 수 있는지 방법을 모르겠어요…;;

    소스를 가져가는건가요?그렇다면 소스는 어디에..?;;

  9. 정찬명 댓글:

    @모르겠어요.
    ‘예제를 새 창으로 보기’ 링크를 누르신 다음 웹 브라우저의 ‘보기>소스보기’ 메뉴를 이용 하세요. 그러면 HTML 소스가 보이실껍니다. HTML 소스는 그렇게 복사해서 가져가시면 되구요. HTML 소스 안에서 CSS/JS 파일 링크를 찾으신 다음 해당 파일을 웹 브라우저로 열고 ‘다른 이름으로 저장’ 하시면 됩니다.

  10. 모르겠어요. 댓글:

    아아..감사합니다..정말..님은 천재예요…님 덕분에 좋아하지않았던 nhn 이미지도 좋아지는군요..님같은 멋진 분들이 많이 일하는 곳이겠죠? 잘쓰겠습니다!!!

  11. 윤군 댓글:

    막무가네 질문으로 받아드릴수 있지만…너무 궁금해서요..
    저렇게 탭을 구현할때 탭의 목록을 이미지로 변경 되게 되는 jquery관련된 정보 아시는곳이
    있나요?
    구글링을 해봐도…백그라운드 변경되는 정도인데…
    기존 자바스크립트 사용할때 처럼 목록 자체가 이미지로 만들어 놓았다면….어떻게 수정을 해야 할지 몰라서요^^:.

  12. 정찬명 댓글:

    @윤군
    이미지로 처리된 메뉴일 때 자바스크립트 소스를 수정할 필요가 없습니다.
    text 자리에 img 요소를 넣고 CSS를 수정해서 ‘보더, 패딩, 마진’ 정도만 수정하면 어렵지 않게 이 소스코드를 그대로 사용할 수 있습니다.

  13. 윤군 댓글:

    ㅎㅎ 탭선택시 이미지 변화에 대해서는 스크립트를 수정해 줘야 하지 않나요?
    평소 탭 이미지가 회색그라데이션에 검정 글씨였다가 선택시 파랑 그라데이션에 흰 글씨로
    변화 되는 그런 이미지 변화가 있는 탭메뉴 에 대해 궁금해서요^^:

  14. 윤군 댓글:

    음 제가

    이런 식으로 코딩하니까 되긴 하던데..이런식의 마크업도 괜찮은 건지요^^:

    경험이 거의 전무하여…자꾸 질문만 드립니다^^:

  15. 윤군 댓글:

    [img src=”tit_not01_on.gif” onclick=”this.src=’tit_not01_off.gif'” onmouseout=”this.src=’tit_not01_on.gif'”]

  16. 정찬명 댓글:

    @윤군

    네, 마우스 오버시 이미지를 바꿔주는 방법도 괜찮은 방법 입니다. 추가적으로 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 으로 숨겨버리면 화면 낭독기가 텍스트 노드에 접근하지 못해서 접근성이 훼손 됩니다.

  17. 윤군 댓글:

    ^^ 덕분에 좋은 정보 알아갑니다.
    감사합니다 ~~ 바쁘실텐데

  18. 전강훤 댓글:

    List Item Navigation 을 저희 웹사이트에 적용해보았습니다.

    IE6,7 에서 처음 접속시 깨져보이는 현상이 있습니다.

    어떻게 수정해야 할까요??? ^^;;; 실력이 미천하여 스스로 해결하지 못하고 있는 중입니다.

  19. 정찬명 댓글:

    @전강훤

    그 문제와 관련하여 아래 댓글을 참고해 보세요.
    http://naradesign.net/wp/2010/03/15/1225/#comment-49994

  20. 전강훤 댓글:

    ^^ 감사합니다~

  21. 김군 댓글:

    안녕하세요,,, 댓글 다신 분들 내용 참고해서 탭 메뉴 활용해서 쓰려는데요..

    소스보기에서 css 가져오기까지 성공했는데… 님의 결과물처럼 탭으로 나오지 않고..

    쭉~ 박스들로만 나오는데 어떻게 하면 되는건가요…

    js 도 가져가야 하는건지…

    요건 어디서 받을수있나요..

    잘몰라서요.. 자세한 답변 부탁드립니다…

    꼭 요 메뉴 사용해보고 싶습니당.. ㅠㅠ

  22. 정찬명 댓글:

    @김군
    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 속성이 올바른 경로를 참조할 수 있도록 경로를 변경해 주시면 됩니다.

  23. GR. 댓글:

    좋은자료들 늘 눈팅하면서 잘보고있습니다 .
    따라 만들어보다가 질문사항이 생겨서 여쭤보려고합니다 ;
    tab 메뉴를 클릭했을시에 화면 위치가 자동으로 최상단으로 이동하는건
    어떻게 좀 바꿀수있나요 ?

  24. 홈박스 댓글:

    List Item Navigation
    예제의 경우 ie6에서 더보기가 우측으로 고정되지 않고 탭을 누를때 마다 위치가 바뀝니다.
    css사용, 미사용 버튼을 쓰지 않을 경우 css, js파일에서 빼야할 부분을 ^^; 알려 주시면 감사하겠습니다. 모든 브라우저에서 크로스 브라우징이 되는데 ie6에서만 계속적으로 버그가 발생하네요.

  25. 정찬명 댓글:

    @홈박스

    일단 IE6 에서는 아래 ul 선택자의 width 값을 px 으로 지정하면 문제가 해결 됩니다.
    다른 방법을 찾으시면 제게도 알려 주세요.

    .listTab li ul { … }

    CSS 사용, 미사용 버튼을 위한 CSS/JS 파일은 별도로 존재하지 않습니다.
    그냥 버튼만 지우시면 됩니다.

  26. 홈박스 댓글:

    가로넓이를 px로 주어서 해결은 되었어요~ 애를 먹었네요. ㅋㅋ 고맙습니다.
    자주 도움 받고있어요

  27. 정찬명 댓글:

    @홈박스
    저도 나중에 도움좀 주세요. ㅋㅋ

  28. 손군 댓글:

    List Item Navigation에 리스트 우측에 날짜를 넣고 싶은데 잘 안되네요…ㅜ.ㅜ
    방법을 좀 알려주세요…..

  29. 정찬명 댓글:

    @손군
    날짜가 사용되는 경우가 많으니 예제에 추가 했습니다. 예제를 다시 확인해 보세요. 고맙습니다. ^^

  30. 유령신부 댓글:

    안녕하세요. 항상 좋은 정보만 보고가다가 처음으로 질문남겨봅니다.
    http://218.234.19.188:9004/index.asp
    에 리스트탭을 적용시켜보았는데요.
    이미지로 대체를 해놓았는데
    오버했을때까지는 해결을 했는데 어떻게해야 선택되었을때 이미지가 바뀔까요? ㅜㅜ…

  31. 정찬명 댓글:

    @유령신부
    제가 한것과 마크업 구조가 달라서 그렇습니다.
    저는 ul 바깥쪽에 div를 하나 더 사용했고 lisTab 이라는 클래스를 주었는데요.
    HTML 구조와 클래스 이름을 동일하게 맞추신 다음 다시 한번 테스트 해보시겠어요? ^^

  32. 유령신부 댓글:

    정찬명님 답변 감사합니다.
    마크업을 똑같이 해놨었는데 개발자분에게 해달라고 하니 임의로 바꿔서 다른스크립트로 처리해주셨어요…

    그래도 꼭 응용해보고 싶어서 또 다른곳에 응용했답니다.
    http://218.234.19.188:9004/designer/designer_view.asp
    이번엔 여기 응용해서 잘사용하고 있어요^^

    그런데 각각 탭하단의 내용들이 li가 아니고 div로 감싼것들이라
    높이값이 변하지않고 footer위로 넘치더라고요…그래서 그냥 무작정 js의 높이값을 지정해줘버렸답니다…
    ㅜㅜ무지해서…이게 제한계인가봐용…
    (js에선 li ul li의 갯수에 따라 높이값이 변하는것같던데…
    맞게 해석했나 모르겠네요…)

    오늘도 정찬명님의블로그에서 열심히 정보캐갑니다^^항상 고맙습니다.

  33. 자바스크립트 댓글:

    클릭말고 마우스오버시 탭이 바뀌게 되는방법으로 올려주시면 안될까요??

    ㅠㅠ

  34. 정찬명 댓글:

    @유령신부
    마지막 예제 ‘List Item Navigation’은 항목의 갯수에 따라서 감싸고 있는 .listTab 요소의 높이가 달라지도록 구현되어 있습니다. 물론 참고 하셨겠지만 잘 살펴보시면 비슷하게 적용하실 수 있으실꺼예요. ^^

  35. 정찬명 댓글:

    @자바스크립트
    .click 이라고 작성된 부분을 .mouseover로 바꿔보시면 되지 않을까요? ^^

  36. 문경록 댓글:

    ie6에서 listTab 을 적용시키면 제목과 시간이 한줄로 붙어서 출력이 됩니다.
    7도 동일하고.. 8과 그외 브라우저에서는 타이틀은 << 좌측으로 안의 부분은 우측으로 정렬되는데 ie6과 7에서만 한 줄로 붙는 이유는 도대체 뭔지 알수가 없네요…

    css안에
    .listTab li li time,
    .listTab li li time. {…} 부분을 이리 저리 수정해 보곤 있는데 쉽지 않네요..
    작은 도움을 주시면 정말 감사하겠습니다 ㅠ

  37. 정찬명 댓글:

    @문경록
    말씀하신 내용만 듣고는 문제를 파악할 수 없습니다. 문제 상황을 볼 수 있는 페이지를 알려주시면 확인해 보겠습니다.

  38. 문경록 댓글:

    // 댓글 남겨주셔서 감사합니다^^;; ie6에서 여러 저러 방법을 시도해 보다가 결국은 웹표준과는 동떨어지게 노가다로 처리했습니다 ㅠㅠ 처음엔 ie6을 배제하고 쉽게 쉽게 작업하다가 뒤늦게 ie6에서도 동일하게 나오도록 수정작업거치면서 표준을 많이 날려먹었습니다 ㅠ

  39. 윤승현 댓글:

    안녕하세요.
    List Item Navigation 을 페이지에 적용하려고 하는데요.

    탭을 마우스 클릭할시에 페이지(첫페이지 / 페이지업)이 되더군요.

    [a href=”#”] 로 인해서 동작이 되서 그런거 같은데요.

    탭메뉴 클릭하면서 계속 자동으로 보던 페이지가 위로 스크롤이 올라가면
    안될듯한데 다른 대안은 없지요?

  40. 정찬명 댓글:

    @윤승현
    listTab.js 파일의 10번째 라인에 return false; 를 추가해 주시면 됩니다. 예제를 업데이트 했습니다.

  41. 야간비행 댓글:

    메뉴가 이미지이고 활성화/비활성화 이미지로 변경되는 경우는 어떻게 해야될까요.
    아무리 찾아봐두 그런 라이브러리는 없는거 같은데 실제로는 네비게이션 같은경우는
    그렇게 많이들 해서요.

  42. 정찬명 댓글:

    @야간비행
    방법이 여러가지 있을텐데요. 저는 보통 하나의 이미지에 활성/비활성 이미지를 모두 머지해서 CSS 배경이미지로 사용하고 문맥에 따라 backgrund-position을 바꾸는 방법을 사용합니다. http://xpressengine.com/ 사이트의 글로벌 네비게이션이 이런 방식으로 제작되었구요. 이미지로 처리된 것들은 재사용하기 불편해서 라이브러리로 만드는 사람이 드물껍니다.

  43. 오민호 댓글:

    안녕하세요?

    위의 예제중에 Faced Tab Navigation으로 메뉴 구성을 해보았습니다.

    원프레임 페이지에 적용하였는데 문제점 하나가 생겨서 질문해봅니다.

    최초 메인일 경우 초기에 선택되어지고 예제대로만 하면 문제가 없으나

    다른 페이지로 이동시 새로고침이나 이런 부분이 있으면 현재 탐색 중인 페이지에 해당

    하는 메뉴가 그대로 표시되길 원하는데 위의 예제에 a태그에 링크를 걸고 페이지 이동을

    시키면 탭메뉴가 초기 설정한 부분으로 돌아가 버립니다.

    a b c 라는 메뉴에 하위메뉴 각 3개씩 있다가 가정하면

    제가 b메뉴의 3번 하위 메뉴에서 c메뉴의 2번 하위메뉴로 이동시 탭메뉴가 초기 설정한대로

    첫번째 탭의 첫번째 하위메뉴를 표시하고 있습니다.

    현재 이동한 페이지의 메뉴가 표시되게 할 순 없을까요?

    구글링하면 쿠키이용한 예제가 있던데 위의 예제에 적용할 방법은 없나요?

  44. 정찬명 댓글:

    @오민호
    현재 페이지의 위치를 메뉴에 반영하는 일은 서버측 스크립트가 해야할 일이라고 생각합니다. facedTab 클래스와 함께 포함되어 있는 m1 s1 클래스 이름을 서버측 스크립트가 바꿔주어야 한다는 의미 입니다. 클라이언트측에서는 적당한 클래스 이름과 화면 표시 방법을 제공하는 선에서 의무를 다 한 것이라 생각하고요. 그 이상은 서버측 스크립트로 처리해야 옳다고 생각합니다. A 에서 B 으로 페이지가 전환했다는 것을 클라이언트측 스크립트가 알기는 어렵지만 서버측 스크립트는 알 수 있으니까요.

  45. 딸기 댓글:

    수직형으로 펼쳐지는 소스는 없나요 ㅠ;;
    수직형이 좋다고하셔서..ㅎㅎ
    쟁애인 이용을 위해 접근성을 고려하여 사이트를 제작중인데 접근성에 문제가 없는것죠? ㅎㅎ

  46. 정찬명 댓글:

    @딸기
    제 블로그에서 ‘수직’으로 검색해 보세요. 접근성에 문제가 없도록 제작했지만 결함이 있을 수 있고 응용하는 과정에서 접근성 문제가 생길 수 있습니다.

  47. Kawkujini 댓글:

    소스보기해서, 사용하려고하는데;; ID 값이 “tab line jx” 이름때문인지, 스타일이 적용이 되질 않네요… 저만 이상한건가요? 다른분들은 잘 쓰신다는거 같은데;; 아직 초짜라…

    .. .

  48. 정찬명 댓글:

    @Kawkujini
    tab line jx 는 클래스 값입니다. jx 값은 자바스크립트 동작 환경에서는 빠지는 값이기 때문에 jx 값을 지우고 테스트 해보세요. 이 예제들은 자바스크립트 지원 환경과 미 지원 환경일 때 서로 다른 UI를 보여주도록 제작했기 때문에 jx 클래스가 있을 때와 없을 때 뷰가 다릅니다.

  49. rainsmell 댓글:

    tab.js 은 어디서 받아야하죠.. 저는 왜.. 쭉 나열 될까요… 좋은정보를 알아도 써먹지 못하는…. ㅠㅠ

  50. rainsmell 댓글:

    tab.js tab.css 는 어디서 받아야하죠.. 저는 왜.. 쭉 나열 될까요… 좋은정보를 알아도 써먹지 못하는…. ㅠㅠ

  51. 정찬명 댓글:

    @rainsmell
    페이지 소스보기 하면 css, js 파일 경로가 보일텐데요.

  52. 댓글:

    정말 유용한 정보인것 같아요 ㅜ
    요즘 웹표준 공부하고 있는데 도움이 많이 되요 ㅎㅎ
    감사합니다 ㅎㅎ

  53. 김진영 댓글:

    안녕하세요
    혹시 익스플로어 9에서 안되시는분 계신가요?

    다른 브라우저에서 너무나 잘 되서 의심없이 확인을 안했더니
    익스 9에서 탭이 모두 펼쳐져 보이네요.

    수정하신 분들이 있으시면 방법 알려주세요~

  54. 정찬명 댓글:

    @김진영
    저는 IE9에서 잘 보이는데요. 위 예제도 그렇게 보이시나요?

  55. 김진영 댓글:

    음. 제가 실수를 했어요.
    전 8을 쓰는데 ietester로 확인하니
    제가 작업한것과 여기 예제 모두 다 펼쳐져 보이더라구요.
    게다가 9 쓰는 사람에게 예전에 작성했던거 제대로 보였냐니까
    다 펼쳐서 보였다고 해서
    그런줄 알고 있었어요. ㅠㅠ
    어제오후에 다른 사람이 확인해줘서 알았어요.
    죄송합니다~

  56. 정찬명 댓글:

    @김진영
    덕분에 IE8 사용자의 IEtester 문제를 알게 됐네요. 알려주셔서 고맙습니다.

  57. 쏠라오렝지 댓글:

    안녕하세요?
    Faced Tab Navigation 활용해서 감사히 사용하려고 합니다^^
    각각의 탭메뉴에 마우스오버 하면 하위메뉴가 나타나도록 바꿔서 사용하는데
    메뉴에 따로 링크할 주소를 입력하고보니까 하위메뉴가 안나오더라구요.

    왜그런가하고 찾아봤는데 js파일에서 ‘>a[href=#]’ 요부분이
    a href가 #이 아닐경우엔 마우스오버가 되지않는듯하여
    나름 테스트해본답시고 html파일에서 링크할 URL을 입력해주고
    js파일 #부분에 동일한 URL을 입력하니 마우스오버도 되면서 해당URL로 링크도 잘되었어요.

    그런데 각 메뉴에 링크할 URL이 다르니까 이대로는 해결이 안되는데
    그 이상은 어떻게 수정을 해봐야할지 잘모르겠네요 -_ㅠ
    혹시 간단하게 수정이 가능한 부분이라면 조언 부탁드려도 될까요?

  58. jinyi 댓글:

    먼져, 이렇게 좋은 소스를 나눠주셔서 참으로 감사드립니다.^^ 간단하면서도 굉장이 멋지게 사용할수 있을것 같네요 ~
    근데 질문이 있습니다. 저 Faced Tab Navigation 응 사용할때 작은 소메뉴들이 대 메뉴 바로 밑에 나타나게 하는방법이 있을까요? 메뉴 1 , 메뉴 2 등 메뉴 5까지 만들어 사용할 경우 작은 소메뉴들이 왼쪽부터 나타나게 되는데 가끔식 메뉴 5를 누를때 작은 메뉴들이 왼쪽부터 나따나기에 변했는지 잘 모를때가 있거든요. 그래서 대메뉴 바로 밑을 중심으로 소메뉴들이 따라서 나타나게 되면 좋을것 같아서요. 그러면 소메뉴의 바뀜이 쉽게 눈에 띌수 있지 않을까 해서 생각해 보았는데요. 그렇게 할수 있는 방법이 있을까요??

  59. 익명 댓글:

    좋은 정보 감사합니다만…

    저도 css/js
    가져가보려니 잘 않되는군요

    html소스 보면 링크에 그저…tab.css—-라 되있어서
    그파일을 어떻게 열어서 어찌 가져와야할 지
    잘 모르겠습니다.
    초학자라 조금 더 자세히 설명 부탁드립니다

  60. 미쟝센 댓글:

    위 질문에 덧붙여
    한가지 더 궁금한데요…

    처음 로딩시 서브메뉴는 보이지 말아야 하는데
    어딜 수정하면 좋을지 부탁드립니다

  61. 미쟝센 댓글:

    죄송합니다
    그리고 css/js 파일 가져 오는 법은 알았습니다

    …번거롭게 해서 죄송합니다

  62. 미쟝센 댓글:

    자꾸 번거롭게해서 거듭 죄송합니다
    ..지금 적용해 보는 중이라…

    원래는 마우스 클릭이엇던걸 마우스 오버로 바꿔보앗습니다
    그런데 각 주메뉴끼리 이동시는 이전 서브메뉴가 잘 사라집니다만
    마우스오버 후 서브 메뉴 탐색후 마우스 아웃 하면 서브가 사라져야 하는데
    남아 있어서…방법 좀 부탁 드립니다

  63. 재하 댓글:

    안녕하세요. 제가 딱 찾던 탭 네비게이션! 잘 보고 갑니다^^ 한가지 여쭤볼게 있는데 이렇게 만든 소스코드, 그리고 그안에 포함된 자바, CSS 를 XE로 돌리는 사이트의 게시판 (board)에 새로운 글쓰기를 통해 불러오려고 합니다. 쓰기 툴에서 HTML은 copy/paste로 쉽게 불러올수 있지만 자바, CSS 링크는 어떻게 불러와야 할지 모르겠네요. HTML과 소스코드를 불러왔지만, 역시 자바, CSS가 입혀진 부분은 작동을 안합니다. 현재 임시방편으로 iframe을 이용해 URL을 걸어 놓긴 했지만…. 이왕이면, HTML, 자바, CSS 코드들 모두 원본 그대로 불러와서 글을 게시판에 등록하고 싶네요.
    방법좀 알려주세용….
    참고로 Mac OS X, Dreamweaver CS5 를 사용하고 있습니다.
    감사합니닷

  64. 정찬명 댓글:

    @재하
    XE 게시판 본문에서 style, script 태그를 사용하여 해당 코드를 붙여넣을 수 있습니다. 사이트 최고 관리자만 가능합니다.

  65. 딸기 댓글:

    안녕하세요.
    또 네비게이션 소스를 사용하고자 들렸습니다 ㅎ;
    세번째 List Item Navigation을 사용하려고 하는데 이것을 한페이지 내에 3개정도로 사용하려면 어떤 추가작업이 필요할까요..
    텝2개 / 텝3개 / 텝2개 로 이루어지는데.,
    모든데 통합되어져 한텝만 보여집니다..ㅎ;
    스크립트, css보두 작업이 필요할까요? ㅠㅠ;

  66. 정찬명 댓글:

    @딸기
    질문을 이해하지 못했어요.

  67. 익명 댓글:

    세번째 List Item Navigation에 탭 클릭시 리스트 나오는 콘텐츠 영역 부분에 div a span 테그로 디자인 좀 할라고 했더니 잘 안됩니다. css 및 스크립트 때문에 그런듯 한데요. div로 버튼 및 레이아웃 좀 해서 사용 할려면 뭘 좀 고쳐 써야 할까요?

  68. 정찬명 댓글:

    @익명
    질문이 모호해서 답변을 드리기가 어렵네요. 일단은 직접 다양한 방법으로 수정을 시도해 보시고 위 코드에서 이해가 안되는 부분을 구체적으로 질문해 주셔야 설명이 가능합니다.

  69. 익명 댓글:

    위 질문 드렸던 익명질문자 박신웅입니다.
    구체적인 질문 드리겠습니다.
    List Item Navigation 리스트 콘텐츠 영역 부분에 아래 소스 타이틀 과 a태그 버튼스타일을 넣었던이 탭부분 a테그의 스타일이 a태그버튼 에 적용되더라고요. 쉽게 수정 될 것 같으면서도 어렵습니다. 스크립트 영향인지 저에겐 좀 복잡스러워서 혹 a테그 영향 받지 않은 탭 소스가 있을 까요?

    소제목스타일

    검색결과

    조회
    엑셀다운로드

  70. 익명 댓글:

    (div class=”buttonwrapper”)
    (div class=”h_wrap”)
    <h5)소제목스타일</h5)
    (/div)
    (div class="fltlft m5000 m0006")
    (p class="smalltitle11")검색결과(/span)</p)
    (/div)
    (a class="smallbutton fltrt m0003" href="#")(span)조회(/span)(/a)
    (/div)

  71. 정찬명 댓글:

    @익명
    만약 HTML/CSS 코드를 제가 봐주길 원하시면 모든 코드를 웹에 올리고 이곳에 링크해 주세요. 이렇게 질문하시면 문제가 무엇인지 전혀 파악이 안돼요.

  72. 신재훈 댓글:

    유용한 자료 정말 감사드립니다. 꾸준히 답변을 달아주셔서 혹시나 하는 마음에 질문을 남겨봅니다.
    Lined Tab Navigation 예제를 적용시켜 보았는데요. 처음 로드된 화면에서는 제대로 보입니다. 하지만 탭을 이용하여 활성화된 div를 바꾸고자 하면 활성화 될 div가 잘려서 나옵니다. 정확히 말하자면 탭의 버튼 크기만큼만 잘려서 보여집니다. 익스플로러 창을 이동하거나 크기를 조정하면 제대로 보입니다.
    공부하고 있던 제 소스를 메일로 보냅니다. 살펴봐 주시면 감사하겠습니다. __)

  73. 정찬명 댓글:

    @신재훈
    예제 페이지를 만들어 놓고 URL을 링크해 주시면 한 번 확인해 보겠습니다. 어떤 버전의 브라우저에서 문제가 되는지도 설명해 주시겠어요?

  74. 최용준 댓글:

    항상 좋은 자료 감사드립니다.
    다름이 아니라 실사용의 목적으로 웹호스팅에 올려놓고 사용할경우 1, 2중 서버에 가장 무리가 덜 가는 방식이 궁금합니다.

    *스크립트중 어떤건은 index 바로 올리고, 어떤것은 js로 만드어 링크하는 기준이 궁금합니다.

    1.

    jQuery(function($){
    var tab = $(‘.tab_list’);
    tab.removeClass(‘js_off’);
    tab.css(‘height’, tab.find(‘>ul>li>ul:visible’).height()+40);
    function onSelectTab(){
    var t = $(this);
    var myClass = t.parent(‘li’).attr(‘class’);
    t.parents(‘.tab_list:first’).attr(‘class’, ‘tab_list ‘+myClass);
    tab.css(‘height’, t.next(‘ul’).height()+40);
    }
    tab.find(‘>ul>li>a’).click(onSelectTab).focus(onSelectTab);
    });

    2.

    새해복많이 받으세요^^

  75. 최용준 댓글:

    2.

  76. 최용준 댓글:

    2.
    {script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”}{/script}
    {script type=”text/javascript” src=”tab.js”></script}

    댓글을 잘못 사용했군요- –

  77. 정찬명 댓글:

    @최용준
    해당 스크립트가 단 하나의 페이지에서만 사용되는 경우라면 HTML에 직접 삽입해서 사용하는 것이 좋겠구요. 여러 페이지에서 반복 재사용하는 경우라면 별도의 *.js 파일로 분리하는 것이 좋습니다. js 파일로 분리하는 경우 브라우저에 캐싱(임시 저장)이 되기 때문에 사용자가 반복해서 js 파일을 서버로 요청하지 않게 됩니다.

  78. 최용준 댓글:

    @정찬명님 답글 덕분에 많은 도움 되었습니다.

    새해 복많이 받이시고, 건강하시길 바랍니다.

    수고하세요^^

  79. 정성호 댓글:

    안녕하세요. 가끔 들어와서 좋은 정보 잘 보고 많이 배우고 있습니다.
    다름이 아니라 List Item Navigation 소스를 사용해서 적용을 했는데 한 페이지에 여러개의 List Item Navigation 을 사용할 경우 어떻게 해야 좋은건지 고민이 되서요.

    css, js파일들을 각각 만들어서 사용해야 하는지, 아니면 다른 방법이 있는지 궁금합니다.
    제가 단순무식하게 생각한건 class=”tab list jx”, class=”tab2 list2 jx2″, class=”tab3 list3 jx3″ 이런식으로 마크업하고 각각의 js파일과 css파일을 만드는 겁니다.

    다른 방법이 있으면 알려주시면 감사하겠습니다.
    수고하세요.

  80. 정성호 댓글:

    추가 문의 드립니다.
    탭메뉴 이동을 click 에서 mouseover로 변경시킨 후 기존 메뉴에 링크를 걸려고 href=’#’를 바꿨더니 안됩니다.

    그래서 a태그에 rel , id, class 등을 이용해서 js에서 그걸 참조하게 바꾸면 탭이 변하질 않더라구요.

    탭 메뉴에 링크를 걸 수 좋은 방법이 있을까요?

  81. 팁포유 댓글:

    제 블로그는 탭 형식으로 나타나지 않습니다.
    뭐가 잘못된 것인지 도저히 모르겠군요.
    한번 봐 주시고 조언을 해 주시면 감사하겠습니다.
    http://tip4u.tistory.com/

    좋은 정보 감사합니다.

  82. 정성호 댓글:

    탭 형식이 어떤걸 말씀하시는건지…클릭하면 바뀌는데요?
    혹시 마우스오버시 바뀌는걸 말씀하시는거라면 js에서 click을 mouseover로 바꾸시면 됩니다.

  83. 정찬명 댓글:

    @정성호
    코드를 업데이트 했습니다. 언급하신 두 가지 문제가 모두 해결되어 있을껍니다.
    1. 한 페이지에 여러개의 탭 사용문제 해결.
    2. 탭에 ‘#’ 아닌 유효한 링크를 포함할 때 동작 안하는 문제 해결.

  84. shushu 댓글:

    아.. 댓글을 안남길수가없어요 ㅠ 좋은게시물 너무 감사해유 ㅠㅠㅠㅠ

  85. 최용준 댓글:

    도움되는 사이트 오랜만에 방문하여, 질문좀 여쭙겠습니다. 정창명님~

    위 css 탭 3번째 있는 메뉴로 아이프레이을 불러오게 하려고 합니다.

    메뉴탭을 8개로 나누어 클릭시 각각 아이프레임을 불러오고 싶습니다.

    눈에는 보이지 않지만, 한번에 불러와서 탭클릭시 보여주는 방식으로 되버려서

    서버부담이 높을것 같아. 클릭시에만 각각 불러올수 있는 방법은 없을까요?

    (안바쁘실때, 답글 부탁드립니다. 즐거운하루되시고, 감기조심하세요)

  86. 정찬명 댓글:

    @최용준
    클릭할 때 필요한 문서를 AJAX 로딩하시면 됩니다. jQuery를 사용하신다면 http://api.jquery.com/load/ 이런 방식으로 가능합니다.

  87. 최용준 댓글:

    @정창명님 답글 감사합니다.

    즐거운 한주되세요.^^

  88. 익명 댓글:

    안녕하세요?
    한페이지에 여러개의 탭 그룹으 사용할 경우 어떻게 해야 할까요?
    좋은 자료 알려주셔서 대단히 감사합니다.

  89. 익명 댓글:

    아 그냥 탭 div를 하나 더 만들면 두개의 탭그룹도 그냥 구현 되는군요

    와 정말 편리합니다. 정말 좋군요

    감사합니다.

  90. 익명 댓글:

    감사합니다 잘쓰겟습니다.

  91. 20151109 댓글:

    안녕하세요..

    소스보기해서 아래

    이건 어디에 있는건지 당최 모르겠습니당. ㅜㅜ

  92. 20151109 댓글:

    안녕하세요..

    소스보기해서 아래

    [script type=”text/javascript” src=”istTab.js”] [/script]

    이건 어디에 있는건지 당최 모르겠습니당. ㅜㅜ

  93. 20151109 댓글:

    엇…잘 되었습니다. 잘 몰라서.. 감사합니다

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님