NARADESIGN

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


jQuery+CSS Tree Navigation.

본문 건너 뛰기

jQuery를 이용한 Tree Navigation 예제는 어렵지 않게 찾을 수 있었는데요. 키보드만으로도 조작이 가능한 접근성 있는 예제는 찾기가 쉽지 않더라구요. 공개된 소스코드를 수정해서 사용할까 하다가 공부도 할 겸 해서 직접 만들어 봤습니다.

중첩 목록(ul>li>ul>li) 구조로 마크업 했고 현재 페이지 활성 상태를 표시 하려면 해당 li 요소에 .active 클래스를 추가(서버측 스크립트로)해 주면 됩니다. 계층 구조가 무한대로 깊어지는 상황도 처리가 가능 합니다. ‘+/-‘ 토글 버튼에 키보드가 접근해서 하위 목록 토글 인터렉션을 조작할 수 있습니다.

예제를 새 창으로 보기

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

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

33개의 댓글이 있습니다.

  1. 아즈키 댓글:

    이쁘네요!
    역시 멋지심!!
    나중에 필요하면 또 갖다가 쓸 수 있는 라이선스이신가요? ㅎㅎ?

  2. Espressivo 댓글:

    근래들어 포스팅 하시는 내용마다 유용하고 좋네요 :)
    앞으로도 쭉 양질의 예제를 부탁드립니다.
    읽을 때마다 배워갑니다^^

  3. 정찬명 댓글:

    @아즈키
    감사합니다. 물론입죠! ㅎㅎ

  4. 정찬명 댓글:

    @Espressivo
    아직 JS는 부족해서 지적도 많이 받고 있습니다. ㅎㅎ

  5. 우진 댓글:

    저도 jQuery 트리 사용하고 있는데,
    이걸로 바꿔야겠네요^^

    여기와서 아주 많이 배우고 갑니다~!

  6. 정찬명 댓글:

    @우진
    이용해 주셔서 감사합니다. ㅎㅎㅎ.

  7. jucke 댓글:

    우와. .멋지네요..
    jquery로만 이루어져서 확장도 쉽네요.
    윈도우 탐색기 처럼 키보드만으로도 폴더을 열고 닫을수 있게 추가해봤는데. 잘 되네요.

  8. 정찬명 댓글:

    @jucke
    완성작을 나중에 볼 수 있으면 좋겠네요. 감사합니다. ^^

  9. 익명 댓글:

    메뉴구조등을 jquery로 표현 하는건 접근성에 위배가 되나요?

  10. 정찬명 댓글:

    @익명
    jQuery는 단지 도구일 뿐입니다. 누가 어떻게 사용하는지에 따라서 달라집니다. 단지 jQuery를 사용했다고 해서 접근성이 떨어지는 것은 아니라는 뜻입니다. 칼을 어떻게 쓰는지에 따라서 유용한 도구가 되기도 하고 흉기가 되기도 하는 것처럼 말이죠. ^^

  11. 나레 댓글:

    처음 나올때 트리메뉴가 전체 잠깐 다 보이는 이유는 무엇일까요~? 원래 트리메뉴는 다 그런가요? (참고로 자바스크립트는 잘몰라요;)

  12. 정찬명 댓글:

    @나레

    이렇게 숨김 모드가 있는 대부분의 인터렉션들은 자바스크립트 미지원 환경을 고려해야 하는 이슈가 있습니다. 즉, 자바스크립트 지원이 부족한 디바이스 또는 브라우저에서 필요한 스크립트가 지원되지 않을 때에는 모든 항목에 대하여 기본값을 펼친 상태로 보여줘야 하위 메뉴에 접근할 수 있는데요. 이 예제는 자바스크립트가 로딩되지 상태에서 모든 목록이 펼쳐지도록 설계되어 있기 때문에 자바스크립트가 완전히 로딩되기 전의 모습이 잠깐 보이는 것입니다.

    웹 브라우저는 HTML을 작성 순서대로 위에서부터 해석하면서 해석이 되는대로 화면에 출력하기 때문에 자바스크립트 코드가 문서의 하단에 있으면 이렇게 됩니다. 이 예제는 body 요소가 끝나기 직전에 자바스크립트 코드를 로딩하도록 작성되어 있구요.

    이 문제를 해결하려면 자바스크립트 코드를 문서의 head 요소에 포함시키면 됩니다. 권장하는 순서는 일단 화면에 직접 영향을 미치는 CSS 코드가 먼저 해석되도록 하고 그 다음 자바스크립트와 HTML이 해석되도록 하는 것입니다. 이 방법의 단점은 JS 파일이 무거운 경우에 head에 포함된 자바스크립트를 로딩하느라 정작 HTML 콘텐츠는 늦게 해석되어 잠깐동안 빈 화면이 보이는 것입니다.

    따라서 웹 페이지 렌더링 체감 속도를 전체적으로 향상시키려면 HTML을 먼저 해석하도록 하기 위해 자바스크립트 코드를 문서 아래쪽에 삽입하는게 일단 좋은데요. 단점은 이 예제와 같이 순간적으로 자바스크립트 미 지원 상태의 모습이 잠깐 보인다는 점입니다. 물론 항상 이런것은 아니고 JS 파일을 최초에 로딩하는 순간만 그렇습니다. 새로고침 하게 되면 로컬 캐시에 있는 JS 파일을 참조하기 때문에 JS 파일이 갱신되거나 로컬 캐시를 지우지 않는 이상 이런 현상은 다시 보이지 않습니다.

  13. 나레 댓글:

    정찬명님 답변 너무 감사드립니다! 평소 드리뭉실하게 알아서 글을 읽어보니 이해가 되었어요! 자주 들리는 블로그인데 올때마다 뭔가 배워가는게 많아요~ㅎㅎ
    이번 4월8일 세미나에 참석할거 같은데 그때도 좋은 정보 얻어갈께요^^;
    아는게 없어 정보공유는 못하네요
    좋은하루되세요~

  14. 정찬명 댓글:

    @나레
    이미 아는것을 공유하면 재미가 없답니다. ㅎㅎ 모르는걸 알아내서 그 때 공유하면 맛이 참 좋지요. ^^;

  15. 윤군 댓글:

    앗…완젼 폐쇄는 아니죠?
    만우절 농담??
    도움 많이되는 사이트였는데…아쉽네요..

  16. 정찬명 댓글:

    @윤군
    잠시라도 즐거우셨기를 바라면서 농담한것 맞습니다. 용서해 주세요. ^^

  17. 윤군 댓글:

    ㅎㅎ 삭막한? 저희회사에서 맛볼 수 없는 재미난 이벤트였습니다 ㅋㅋㅋ

  18. 마약 댓글:

    윽…J쿼리네요…. ㅠ.ㅠ;
    프레임웍을 별로 좋아라 하질 않아서, 왠만하면 원시코드로 구현을 하고 있거든요…
    언젠가부터 어떤 천재분께서 저런걸 만들어서 내놓으셔갖구, 그동안 원시코드 공부한것도 헛수고가 아닐까라는 생각을 가끔 하곤 합니다…;
    남들은 J쿼리로 화려한거 자꾸 만들고 있는데, 혼자 원시코드를 고집하고 있으니 참 답답한 성격이죠? ^^;;ㅋㅋ
    약간 난이도 있는걸 구현할때는 본인도 쿼리를 쓰고는 있지만, IE9에서 J쿼리를 탑재하겠다는 기사가 떳음에도 불구하고…사용한다는게 영~ 내키지가 않네요.

    성격바꾸고 대세를 따라야 할까요….-,-a

  19. 정찬명 댓글:

    @마약
    불필요할 수도 있는 라인들을 항상 로드해야 한다는게 프레임웍의 단점이지만 자바스크립트를 한 두곳 쓸게 아니라면 프레임웍이 훨씬 유리하겠죠. ^^ 결론은 상황에 맞게 쓰면 되고 굳이 꼭 쓸 필요도 없고 굳이 배척할 필요도 없다 정도 되겠습니다. ㅎㅎ

  20. 익명 댓글:

    페이지 활성화를 위해서 서버측 스크립트를 사용하면 된다고 하셨는데 예제 알려 주시면 안될까요? 서버언어에 따라 달라지겠지만요….

  21. 정찬명 댓글:

    @익명
    제가 서버 사이드 개발자가 아니라서 서버측 코드 예제는 답변이 어렵습니다. 한편 서버 언어에 따라서도 달라지고 개발자의 구현 방법에 따라서도 달라질것 같습니다. 현재 페이지에 해당하는 노드의 li 요소에 class=”active” 와 같이 active 라는 CSS 클래스 값을 추가해 주기만하면 됩니다.

  22. 최준규 댓글:

    안녕하세요~

    이 트리 네비게이션 보고 제가 조금 수정하여 배포하려고 하는데 가능한지요?

    http://madev.tistory.com/43 이렇게 배포하려고 하는데요..

    css 랑 이미지는 그대로 사용하고.. html 이랑 자바스크립트만 수정하여서 재배포 할려고 합니다.

    배포해도 문제가 없는건지 혹시 문제가 있다면 배포를 안해야 하는건지, 수정하여 배포하면 되는건지 가르쳐주세요..

    항상 잘 배워갑니다.

    좋은하루 되세요 ^^

  23. 정찬명 댓글:

    @최준규
    수정 여부와 관계없이 어떤 형식으로 배포하셔도 아무런 문제가 없고 출처를 남기실 필요도 없습니다. 누구나 작성할 수 있는 코드에 제가 어떤 권리를 주장하는 것은 말이 되지 않고 그런 생각을 해본적도 없습니다.

  24. […] » jQuery+CSS Tree Navigation. – NARADESIGN:BLOG. Filed under: Memo&Draft No Comments 18Apr/110 […]

  25. jinyi 댓글:

    다은 메뉴를 클릭했을때 펼쳐있는 메뉴가 자동으로 접히게 하는 방법은 없을까요..?도와주세요 ~

  26. 정찬명 댓글:

    @jinyi
    가능합니다. 다만 제가 직접 코드를 짜드릴 수는 없습니다. 소스를 분석해서 고쳐보세요.

  27. Barbie 댓글:

    Stellar work there eervnyoe. I’ll keep on reading.

  28. 김지만 댓글:

    제가 찾던 소스 드디어 찾았습니다. 잘쓰겠습니다^^

  29. 김지만 댓글:

    btnplusminus.gif 구조는 어느정도 이해가 가는데 linetree.gif 이미지는 도무지 이해가 되질 않습니다. linetree.gif 이미지좀 보내주실수 있으세요? 공부하고 싶습니다.

  30. 정찬명 댓글:

    @김지만
    라인 이미지의 경로 입니다. CSS 코드 안에 사용한 이미지 참조 경로가 모두 있습니다. http://naradesign.net/ouif/uio/navigation/vertical/tree/lineTree.gif

  31. 익명 댓글:

    혹시 모두 펼치기 닫기 가능한가요?

  32. 정찬명 댓글:

    @익명
    물론이죠. ^^

  33. 익명 댓글:

    좋은 내용 감사합니다^^ 잘 쓰겠습니다.

댓글 쓰기

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

필수 아님

필수 아님