CSS Navigation Bar.
최근 저희 팀에서는 ProjectXE 라는 것을 준비하고 있습니다. 이슈트래커 또는 버그 트래킹 시스템이라고 불리우는 종류의 프로그램이죠. 현재 issuetrackerXE 라는 이름으로 배포되고 있는 모듈의 기능과 디자인을 조금 더 개선시킨 패키지 버전이라고 볼 수 있습니다. 제가 직접 기획도 했으니까 나중에 배포가 시작되면 피드백도 부탁드려야 겠네요.
이번에는 운이 좋게도 디자인팀으로부터 지원을 받았는데요. 이렇게 디자인팀으로부터 지원을 받은 디자인은 품질이 상당히 좋아서 한 번 쓰고 말기에는 정말 아깝더라구요. 재 활용 가치가 있는 UI 콤포넌트는 가끔 처음부터 재 사용을 염두해 두고 설계를 합니다. 물론 시간이 무척 오래 걸리는 단점은 있지만 다른 누군가의 시간을 분명히 단축해 줄꺼라 믿고 있습니다.
오늘 공유해 드릴 UI 콤포넌트는 평범한 네비게이션 바 입니다. 이런 종류의 네비게이션은 너무 흔해서 일년에 열두번도 더 코딩을 하지만 항상 재 사용을 염두하지는 않았기 때문에 할 때마다 새로 만들고 처음부터 다르게 코딩 합니다. 물론 디자인이 조금씩 달라지는 것도 이유가 있겠지만 다소 소모적인 부분이 있었던 것도 사실입니다. 보기에 평범해 보이지만 재 사용과 보편적 설계를 위해서 제가 이 네비게이션 바에 얼마나 많은 정성을 쏟았는지 한 번 설명드려 보겠습니다.
보편적이고 사용성이 좋은
수평 네비게이션은 보편적인 형태지만 하위 메뉴를 처리하는 방법에는 크게 두 가지 형태가 있습니다. 하위 메뉴를 수평으로 늘어뜨리거나 또는 위 예제와 같이 수직으로 늘어뜨리거나. 그런데 이 두 가지 형태의 메뉴 구조는 사용성이 크게 다릅니다. 하위 메뉴를 수직으로 늘어뜨리는 것이 사용성과 확장성이 훨씬 좋습니다.
하위 메뉴를 수평으로 열게 되면 사용자는 정확하게 선택하기 위하여 ‘L’자 모양으로 마우스 포인터를 이동시켜야 합니다. 게다가 하위 메뉴 영역을 벗어날 때 하위 메뉴가 사라지도록 처리하는 경우 사용성은 더 나빠집니다. 원하는 메뉴 링크까지 이동하려면 조심스럽게 마우스 포인터를 옮겨야 하니까요. 하위 메뉴를 수직으로 펼치면 마우스의 이동 괘적은 ‘I’자 모양을 그리게 되고 마우스를 옮기는 과정에서 메뉴가 닫힐 위험은 사라집니다.
웹 표준과 접근성을 지키는
이런 메뉴 구조를 테이블 <table> 요소를 사용해서 마크업하면 의미에도 맞지 않고 접근성도 떨어집니다. 네비게이션 요소는 HTML로 표현할 때 ‘목록’ 요소 <ul>, <li>로 마크업 해야 합니다. 동등한 수준의 내용이 같은 계층에서 여러번 반복 된다면 ‘목록’입니다. 시각장애인이 사용하는 화면 낭독기는 이런 목록에 대하여 목록의 ‘시작, 끝, 단계 그리고 항목의 개수’를 음성으로 알림으로써 목록에 대한 이해를 돕습니다. 상기 예제에서 ‘CSS X’ 버튼을 누르면 네비게이션이 어떤 HTML 구조로 마크업 되어 있는지 확인할 수 있습니다. 이렇게 코딩된 네비게이션 바는 다음과 같은 장점을 갖습니다.
- 상-하위 계층 관계가 논리적으로 처리되어 CSS를 지원하지 않거나 걷어낸 장치(예:모바일)에서도 이해하기 쉽습니다.
- 모든 항목에 키보드 접근이 가능하고 키보드 접근 순서가 의미있게 처리되어 있습니다.
이 네비게이션 바는 키보드만을 사용할 수 밖에 없는 시각장애인과 지체장애인도 사용할 수 있습니다. 키보드만으로 탐색을 시도해 보세요.
유연하고 확장하기 좋은
하위 메뉴의 개수가 상당히 많이 늘어나는 상황에서 수평으로 열리는 하위 메뉴는 필연적으로 줄바꿈을 동반하거나 메뉴의 개수를 제한하게 되지만 수직으로 열리는 메뉴는 그럴 필요가 없기 때문에 메뉴 데이터가 가변적인 상황에서 확장성이 더 좋습니다.
메뉴의 전체적인 너비는 레이아웃에 맞게 가변폭으로 조절되고 메뉴 항목의 너비도 메뉴 이름의 길이에 따라 모두 가변폭으로 처리되어 있습니다. 디자인 때문에 글자 개수를 자르거나 제한 할 필요가 없습니다.
네비게이션 바의 색상을 바꾸기 위해 새로 이미지를 컷팅할 필요가 없습니다. CSS 편집을 통해 배경색과 보더 색상만 변경해 주면 끝입니다. 은은하게 처리된 그라디언트 효과는 배경색상 위에 반투명 흰색 그라디언트 PNG 이미지를 덧붙이는 기법으로 처리 했습니다.
이미 널리 쓰이고 있는
jQuery 자바스크립트 프레임웍을 사용했기 때문에 약간의 자바스크립트 코드를 추가하거나 변형하면 누구나 쉽게 사용할 수 있습니다. 물론 지금 그대로 사용해도 될만큼 이미 스크립트가 잘 처리되어 있습니다. 자바스크립트는 행복한고니에 의해 처리 되었습니다.
브라우저 호환성
다음과 같은 브라우저에서 테스트 되었고 호환성이 확보되어 있습니다.
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8
- Firefox 3
- Chrome 4
- Safari 4
- Opera 10
이 네비게이션을 처리하기 위하여 테스트 했던 거의 모든 브라우저들의 버그를 다 만났던것 같습니다. 여러분이 보시기에 HTML 코드에 ‘이건 왜 이렇게 마크업을 했지?’ 라고 의문이 든다면 그 부분이 바로 그 흔적 입니다. 특히 IE7 브라우저의 경우 링크 영역(width)을 제대로 렌더링하지 못하는 버그 때문에 상당히 고전을 했는데 결국 방법을 찾지 못하고 자바스크립트의 도움을 받아서 디버깅 했습니다. 코딩하는데 1.5일이 걸렸고 디버깅하는 시간도 1.5일이나 걸렸습니다. 3일동안 쳐다보고 있으니 아주 지겨워 죽겠더라구요.
저도 같은 고민을 했고, 은은하게 처리된 그라디언트 효과를 주기 위해 배경 위에 반투명 흰색 그라디언트 PNG 이미지를 올리는 것은 정말 똑똑한 아이디어라고 생각해요.
IE에서는 css 알파필터로 그 효과를 줄 수 있었는데 파폭 등에서는 이게 안되서 고민했던 적이 있었는데 그다이언트 png 이미지를 올림으로써 그런 효과를 주도록 만들고 나서 엄청 기뻐했던 기억이 있네요. ^^;;; 글에서처럼 메뉴에 사용할 수도 있고, 최근 게시물 등에서 글자를 은은하게 사라지게 할 때도 사용할 수 있겠죠.
이슈트래커XE는 저도 XE프로젝트를 통해서 이용하고 있지만 처음부터 사용에 상당히 애를 먹고 있어요. 도대체 어떻게 사용해야할지를 모르겠더라고요.
일반 게시판과는 달리, 글을 보는 화면과 글을 쓰는 화면이 따로 있고,
자료를 올리는 화면 역시 더 클릭해서 들어가야 보이고,
XE프로젝트의 이슈트래커는 상당히 사용하기 쉽지 않은 화면 구성이에요.
더 정확하게 쓰고 싶은데 지금 XE사이트가 열리질 않네요 ^^;
나중에 정리해서 어떻게 했으면 좋겠다를 XE UI라운지에 올리도록 할게요;;
그리고 보편적이고 사용성이 좋은..에서 수직 메뉴는 수평 하위 메뉴에 비해 사용성과 확장성이 좋은 것은 맞는 말이지만, 사실 조금 더 불편한 마우스 동선을 그린다고 생각해요.
하위 메뉴의 동선을 L 자라고 하였지만 L 보다는 ㄴ에 가깝죠.
제가 말씀드리는 건 L과 ㄴ이라고 하면 그게 그거지라고 하실지도 모르겠지만
약간의 차이죠. 보시기에 L은 상당히 내려와서 다음 하위 메뉴로 이동하는 것을 말하는 것이고 ㄴ은 약간만 마우스의 위치를 이동하면 상위 메뉴의 동선과 같이 가로 메뉴입니다.
이 것은 어떻게 메뉴의 위치를 디자인하고 코딩하느냐에 따라서 같은 수평 하위 메뉴라 할지라도 이동하여 사용하기 편리한 수평 하위 메뉴가 있고, 같은 형태라 할지라도 사용자의 마우스 이동선을 정확하게 고려하지 않으면 말씀대로 하위 메뉴에서 조금만 벗어났는데도 하위메뉴가 사라지는 사용성이 아주 나쁜 예제가 될 수 있죠.
일반적으로 이러한 메뉴를 가진 사이트를 여행하게 되면 많은 사이트가 이러한 위험을 가지고 있음을 알 수 있습니다만, 이 것은 메뉴를 디자인하고 코딩하는 사람의 잘못이라고 생각합니다. 충분히 수평이라고 해서 사용성이 떨어지거나 확장성이 떨어진다고 생각하지 않습니다.
오히려 그런 구조라면 수직이 메뉴가 많아질 수록 그 사용성이 떨어진다고 볼 수 있죠..
만약 수직 메뉴가 화면 한 가득 내려오게 된다면, 사용자는 상위 메뉴로 가기 위해 다시 화면의 상단으로 가야만 하는 동선의 불필요한 구조를 낳게 하죠.
반면에 그렇게 많은 메뉴가 있다하면 수평 메뉴는 간단히 두세줄의 동선 이동으로 다시 상위 메뉴로 갈 수 있을 겁니다.
위에서 제가 디자인과 코딩에 따라 그 사용성이 떨어질 수도 있고 좀 더 유연한 메뉴 이동이 될 수도 있다고 말씀드렸는데, 그래서 제가 사용한 방법은 상위 메뉴의 margin-bottom:0px의 바로 아래에 하위 메뉴를 두는 것이 아니라 margin-bottom:-5px 정도로 보통의 메뉴보다 약간 올라간 형태로 하위 수평 메뉴를 띄운다면 사용자는 파도를 타듯이 상위 메뉴로 가기 위해서는 파도의 물결 형태로 마우스 동선을 이동하면 되는 식이었습니다.
물론 이 경우에도 사용성이 완전히 좋다라고만 할 수는 없는게 분명히 정찬명님 말씀대로 메뉴 링크대로 조심히 이동해야할 수도 있는 문제점이 생길 수도 있겠죠.
제가 말씀드리고 싶은 것은 수평 메뉴보다 수직 메뉴가 좀 더 보편적이고 사용성이 좋다라고만 말할 수는 없다라는 것이지, 수평 메뉴가 더 좋다라는 건 아닙니다. (@_@;;)
이 것은 디자인에 따라서 적절하게 어울리는 형태를 만들면 되는 것이지, 무조건 하나가 더 사용하기 쉽고 좋은 예라고 할 수는 없다는 말입니다.
그동안 수평 하위메뉴가 불편하다고 여기고 사용했던 것은 우리가 만나봤던 자바스크립트의 문제이지 수평 하위메뉴의 구조 자체가 문제일 수는 없다고 생각합니다. 그렇다면 상위 메뉴 역시도 수평 구조인데, 하위 메뉴를 띄우기 위해서는 그 상위 메뉴에 적절하게 마우스를 위치시켜야 하니깐, 어차피 수평 하위 메뉴는 사용하기 불편하다라는 건 수직 메뉴를 띄우기 위한(돋보이게 하기 위한) 논리인 거죠.
유연하고 확장성이 좋은..에서도 벌써 위에 말씀드렸지만 좀 더 고민해서 머리를 굴린다면 수평 메뉴도 충분히 사용하기 좋은 메뉴 구조가 될 수 있다고 생각합니다. 물론 그 과정에서 수직 메뉴는 간단히 그냥 띄우면 되겠지만, 수평 메뉴 구조는 그 구조를 생각하기 위한 충분한 연구과정이 필요하겠죠.
저도 해봤는데 쉬운 일은 아니었습니다.^^;; 쉽지 않으니깐 쉬운 것이 확장성이 좋다라는 것보다 불편하고 어려운 일을 좀 더 쉽게 만드는 것도 웹을 만드는 사람들의 해야할 일이겠죠. ^^;
글의 요지는 수직 하위 메뉴에 대한 글이니깐 제가 글 자체에 대한 반박하는 것이 아니라 수평 메뉴의 옹호;;라고 봐주세요..뭐든지 문제도 있을 수 있고, 그 문제를 해결할 수도 있죠. 다른 점은 무엇을 선택해서 하느냐의 차이죠.
자꾸 동선, 동선 그랬는데 두 메뉴의 동선을 간단히 말하자면 확장성까지 고려해서,
수평 메뉴는 전반적으로 옆으로 긴 타원성의 동선인데 반해, 수직 메뉴는 오히려 긴 계곡을 가는 것이고, 수평 메뉴는 파도의 흐름을 타는 동선이죠. ;;
결론은 산과 바다의 차이네요. (__);;;
아직 소스는 보지 않았지만 보고 열심히 배우겠습니다. 좋은 자료 감사합니다 ^^;
제가 보여드리고 싶은 것은 제가 이전에 만들었던 하위 메뉴인데
그리고 자바스크립트는 아래에서.
http://www.psyonline.kr/1234425388
똑똑하게 상위 메뉴의 너비에 맞게 하위 메뉴도 그 범위를 벗어나지 않아요
http://eond.com/files/attach/images/120347/881/175/rosso_bg_menu.png
이게 그림이에요. (__); 이미지 태그가 먹혀버리네요.
정낙훈님,
수직 드롭다운 메뉴의 이점을 추가로 설명드려 볼께요. 동일한 10개의 하위메뉴가 있고 가장 마지막 하위메뉴를 클릭해야 하는 상황을 가정해 볼께요. 수평으로 펼치는 메뉴는 일단 마우스가 직선으로 이동하지 못하죠. 직선으로 이동하면 다른 메뉴에 롤오버가 되면서 하위메뉴가 사라지니까요. 그래서 ‘L’ 또는 ‘ㄴ’ 모양으로 이동하는데 이렇게 동선이 꺽이는게 첫 번째 불편함 입니다. 그리고 두 번째 불편함은 수평으로 펼쳐지기 때문에 마우스 이동거리가 상당히 멀어집니다. 수직으로 떨어지는 메뉴는 마우스 이동시 꺽임이 없고 마우스 이동 거리도 훨씬 짧기 때문에 사용성이 더 좋다는 것입니다. 수평/수직 드롭다운 메뉴의 사용성 비교에 관한 글을 본적이 있는데 집에 들어가서 찾게되면 다시 소개드릴께요. 지금은 휴대폰이라 엄지 손가락이 저려오네요. ㅎㅎ
항상 좋은 글 감사합니다.
복집하지 않고 간단하지만 멋진 네비게이션이네요~ ^^
비록 눈으로 보기엔 같은 네비게이션이지만
구현하기에 따라서 여러가지 방법으로 멋진!!(구현방법이) 모듈이 생성되네요~
좋은 포스팅 감사하고요 항상 많이 배워갑니다~
눈이 많이 오네요~
수고하시고 미리 설날 인사로~ 새해 복 많이 받으세요~ ^^
ie6 호환성 확보에서 매번 애를 먹었는데 깔끔하네요.
다만 ie6에서 하위메뉴 네비게이션중 해당하는 상위매뉴의 오른쪽 화살표가 깜박이는 현상이 발견되었습니다.
정말이지 ie6 호환성을 신경쓰지 않아도 되는 날이 어서 왔으면 좋겠습니다.
군더더기 없이 깔끔하게 만들어진 메뉴 잘 봤습니다.
코드를 보면서 제가 잘 못한 부분도 찾을 수 있었네요. ^^
훌륭하세요! ^^ 네비게이션 만들 때마다 골치 썩었는데, 완전 화끈한 네비게이션 라이브러리라고 할 수 있을 것 같아요! ^^
낼름 받아먹기가 미안한 작품입니다 (__)
그런데 힘들게 코딩하신것 보다 디자인에 시선이 쏠려서 더 미안해집니다 (퍽퍽)
—
ie6, ie7 a 태그의 너비를 못 잡을때 배경 색이나 이미지를 지정해주면 잡히는 경우가 있었습니다.
background:url(); 입력해서 배경을 그대로 놔두고 브라우저에서 배경이 있는 것 처럼 인식시켰습니다.
그렇게 해도 안먹히는 경우도 있구요 -_-;;;
저는 메뉴 마크업을 1차 메뉴는 ul 태그, 2차는 ol 태그를 사용합니다.
둘 다 ul 태그를 사용하는 것과 의미 차이가 있을까요?
궁금한 게 있는데 이거 XE 네비게이터 위젯으로도 나오는 건가요? ^^;;;
http://eond.com/?mid=test3
http://eond.com/
블루게이트님의 메뉴 출력 위젯을 가지고 이 소스를 사용해서 스킨을 만들어 봤는데
좀 어렵네요. ^^;;;
http://svn.xpressengine.net/eond/trunk/widget/bgw_menu/skin/naradesign
소스는 이렇고요;;
@정낙훈
XE메뉴맞죠?
이미지 메뉴는 link, 텍스트는 text 이렇게 출력되게 해보세요.
{$v['text']}{$v['link']}
웁스.. 태그를 입력하면 그대로 출력되는걸 깜빡 -_-;
http://i.imagehost.org/0169/asd.gif
출력은 제대로 되는데 출력된 레이어가 잘린다는게 문제라서..link, text 잘못 쓴 거 문제는 아닌 거 같은데요..^^a;
알아봤는데 XE가 이상하더군요. 위젯에서 overflow:visible; 속성을 줬는데도
이걸 다시 div 씌워서 overflow:hidden; 해버리니 안 보였던 것 같습니다.
이 문제는 어떻게 해결해야할지 모르겠네요.
음, 그리고 이용하다가 좀 불편한게 뭐냐면 서브메뉴가 뜨는 메뉴를 벗어나면 서브레이어가 사라져야 하는데, 메뉴에서 마우스를 위로 올려버리면 그대로 서브메뉴가 떠 있으니깐
이상하더라고요.
http://www.psyonline.kr/1234425388
이 소스는 메뉴에서 서브메뉴가 뜬 상태에서 마우스를 위로 올려버리면
서브레이어도 사라지는데
포스팅된 소스는 그렇지 않아서 실제로 이용할 때 조금 불편할 수도 있을 것 같아요.
아래는 실제 이용한 예;;
http://eond.com/
포스팅된 소스는 레이어 사라지는게 정확하게 어떻게 해야 사라지는지 잘 모르겠네요.
서브메뉴가 뜨는 맨 오른쪽 메뉴의 경우는 서브레이어 위에서 마우스를 오른쪽으로 계속 이동해도 안 사라지네요..
엘카님, 저도 한 때 그런 방법을 사용 했었는데요. 무리가 없다고 생각합니다. ^^
소스 보는 거 너무 어렵네요. ㅜ_ㅜ; 눈이 너무 따갑네요. 이제 자야할 듯 싶네요..ㅠㅠ
할 수록 더 망가지는 것 같네요.. ;;
정낙훈님, 네비게이션 위젯으로 만들지는 아직 모르겠습니다. ^^ 그리고 서브메뉴 우측으로 롤아웃 될 때 사라지도록 고쳤습니다. 감사합니다.
menu.js 파일에서 요기만 수정하세요.
li_list.find(‘div.sub’).mouseleave(hide_this); /* 수정 전 */
li_list.find(‘div.sub>ul’).mouseleave(hide_this); /* 수정 후 */
한번 만들어봐주세요. ^^;
너무 어렵게 해도 제대로 안되서 토할 것 같아요. (__);;
http://eond.com/ 도저히 저 aside는 왜 우측으로 안 붙는지도 모르겠고.. ㅠ
메뉴가 많아지면 플래닛 경우는 다른 레이어 아래로 숨는 지도 모르겠고..
아마 저도 다시해야될 듯 싶네요. ㅎ;;;;;;;;ㅠ
감사합니다…
정낙훈님, 화면 우측 상단의 시계가 float:right 인데 clear가 되지 않아서 그래요. #gnb 요소에 clear:both 처리를 해주면 됩니다.
도움 말씀 감사합니다. ^^;; 항상 float:right; 한 다음엔 clear:both; 해줘야 다음 요소가 영향을 받지 않는 군요;; 감사합니다.
정찬명님의 말씀 한 마디면 완벽해지는군요 ^^;
메뉴 위젯 스킨에 사용된 jQuery 1.4.1. 버전이
1.3.2를 사용하는 XE의 플래닛 모듈과 충돌이 생겨
플래닛이 제대로 작동하지 않더군요. (__);
우선은 XE에 사용된 jquery를 1.4.1로 임의로 교체해서 사용하고 있습니다;;
이거 근데 위로도 마우스 영역이 벗어나면 서브 메뉴 사라지게 하려면 어떻게 하나요? ^^;;
회원가입, 아이디/비밀번호 찾기, 인증메일 재발송
이 3개를 ul li 태그로 마크업 했습니다.
잘했어요? -_-;;
낙훈님, 마우스가 위로 벗어나는 경우에 대한 처리를 수정했습니다. 덕분에 조금씩 완벽에 가까워 지는것 같아서 너무 기쁩니다. 낙훈님도 새해 복 많이 받으시구요. ^^
PS : menu.js 파일만 업데이트 하시면 되요! 그리고 jQuery 버전 변경시 XE에 발생할 수 있는 문제에 대하여 저는 보증 못합니다. ㅡㅡ; ㅎㅎ
엘카님, 나쁘지 않은것 같은데요. 저도 로그인 상자 디자인 할 때 그렇게 마크업 하거든요. ^^
잘됩니다. ^_^
js 파일은 XE에서 빨리 jQuery.1.4 버전이 업데이트 되길 고대할 수 밖에요. ㅠ_ㅠ
언젠가는 되겠지요;; 그 때 되면 다른 분들도 무리 없이 사용할 수 있을테고;;
안녕하세요.
자주 들어와서 ㅋㅋ 정보 얻어가는 홈박스 라고 합니다.
소스 잘 보았습니다. ㅋ 다름이 아니라
w3c 에서 보면 웹표준에서 인라인 요소 내에 블럭 요소가 들어오면 w3c내용에 어긋나고 잘못된 방법으로 알고 있습니다. 저 또한 그걸 항상 지켜 왔구요.
[li class="m1"][a href="#"][span]동해물과[/span][/a]
[div class="sub"]
[ul]
[li][a href="#"][span]동해물과[/span][/a][/li]
[li][a href="#"][span]동해[/span][/a][/li]
[/ul]
[/div]
[/li]
위 소스를 보면 위에 처럼 인라인 요소li 내에 블럭 요소인 div를 넣었는데 위 방법 보다는
div를 span 등으로 바꿔서 css class=”sub” 클래스내에 블럭 속성 을 줘서 하는게 더 맞지 않을까 생각되는데 생각이 어떠신지 궁금 합니다.
[li class="m1"][a href="#"][span]동해물과[/span][/a]
[span class="sub"]
[ul]
[li][a href="#"][span]동해물과[/span][/a][/li]
[li][a href="#"][span]동해[/span][/a][/li]
[/ul]
[/span]
[/li]
제가 생각한게 틀린건지 약간 혼동이 오네요.
인라인 내에 블럭이 오면 안되는걸로 아는데
지금 테스트 해보니 p 는 w3c에러가 나고 div 안나오는걸로 봐서 인라인 소요내에
div는 예외 인가요? ㅡㅡ; 부족하네요. 많이
홈박스님 안녕하세요?
li 요소는 블럭요소라서 블럭요소가 자식으로 올 수 있습니다.
그리고 span > ul 형식으로 마크업하시면 인라인 안쪽에 블럭이 오기 때문에 잘못된 문법이 됩니다.
현재 제가 마크업 한 방법은 문법에 맞는 방법입니다.
유효성 검사기로 확인해보세요. ^^
p를 넣었을 때 오류가 나는 이유는 p 안쪽에는 인라인 요소만 허용하기 때문입니다. 그런데 p 안쪽에 블럭요소인 ul이 있기 때문에 유효하지 않은 것입니다. 반면 div 요소는 인라인과 블럭을 모두 자식으로 둘 수 있습니다.
참 여러가지 소스를 보아왔고 사용도 해왔는데
우연하게 찾은 이 내용은 최강입니다.
접근성이 완벽하게 작동하면서도 쉽게 수정가능한 소스군요.
멋져요.
이소스를 응용해서 왼쪽자리에 보통쓰는 드롭메뉴를 만들려고 하는데요…
제가 보기에는 많이 어렵네요 -_-;;
php 보다 css3 + 자바스크립트가 더 어렵게 느껴지네요 ㅠ.ㅠ
김정훈님 감사합니다. ^^
익명님 혹시 성공하시면 링크 한 번 걸어 주세요. HTML 변경 없이 CSS/JS 파일만 변경하시면 좌측 사이드 메뉴로도 얼마든지 응용이 가능 하거든요. 부디 성공하시길 빌겠습니다. ^^
제가 초보라 좌측사이드메뉴를 어떻게 해야하는건지 -_-;;
감이 안오네요 ㅠㅠ
힌트라도 좀 ㅠ.ㅠ
js도 변경해야 하는거였나요 -_-;;;
show랑 hide기능만 js로 구현되는건지 알았는데-_-;;
아 어렵다 ㅡ,.ㅡ;;
힌트좀 ㅠ.ㅠ
이 스타일로 탑메뉴랑 좌측메뉴 빠른상담
상품페이지를 css로 하려면
비용이 어떻게 되나요 ㅠ.ㅠ
꼭 구현을 해야해서 ㅠ.ㅠ
박원근님,
어떤 디자인인지 보여주실 수 있나요? 만약 제가 생각하고 있던 방식과 유사한 방식이라면 시간 날 때 예제로 만들어 공유할 계획이 있거든요. 정 급하시면 그 부분만 비용 받고 해드릴 수도 있구요. ㅎㅎ
지금 네비게이션은 브라우져 창을 줄이면 메뉴가 2단으로 나누어 지는데
ie6을 제외한 나머지브라우져는 min-width를 주면 돼겠지만.
ie6에서는 어떠한 방식으로 min-width을 만들 수 잇을까요..(쉽게.)
(제가 min-width, 100%사이즈 떄문에 고민을 많이 하는주이라..ㅎㅎ)
가장 쉽게 만들어진게..
body {
width: 100%;
height: 100%;
min-width:900px; /* 최소 넓이가 지원되는 브라우져를 위해서 …FF, IE7, safari */
margin: 0px;
padding: 0px; /* 옵션입니다.*/
/* 만약 콘텐츠를 가운데 정렬로 하고 싶은 경우 text-align: center 를 타이핑 하시고,
패딩값을 적당하게 올려주시면 됩니다.*/
}
#MinWidthContainer {_padding-left:900px; _height: 1px; }
#MinWidthContainer #PageContainer {_height: 1px; }
#MinWidthContainer #PageContainer #PageContentContainer {_margin-left:-900px; _position: relative; _height: 1px; }
이거더라구요!!!(제가 본거 중에 .js제외하고)
어라 익명이 됐었네요..위에 내용~~~~
김정수님,
저는 아직 저 방법을 시도해 보지는 않았는데요. JS를 고려하지 않는다면 현재로써는 더 나은 대안이 없어 보이는데요. ^^
정찬명씨의 글이 많은 개발자들에게 도움이 됩니다.
관련서적 10번 찾아보는 것보다
한번 이 블로그에서 검색해서 찾는게 빠르더군요. ^^
노력하시는 모습 너무나 멋집니다.
여러 브라우저에서 동일한 모습으로 보여지는데요
역시나 IE6이 문제네요…
우측 만세 부분의 하위 메뉴는 IE6에서 출력이 안되더라구요
FF나 크롬에서는 정상적으로 보여지는데요…
한번 살펴봐주시겠습니까?
송영호님 감사합니다. ^^
IE6에서 출력 안되는 우측 끝의 서브메뉴는 나중에 추가한 코드라서 제대로 확인을 못 했네요. 잠깐 살펴 봤는데 아직 해결 방법을 못 찾았습니다. 조만간 해결되면 다시 업데이트 하겠습니다.
송영호님 IE6 문제 해결 했습니다. ^^
새벽에 일어나서 1시간 30분 동안 씨름 했더니 결국 풀리네요.
IE6 때문에 못 살겠어요. ㅎㅎ
저도 여러가지 방법으로 시도 해보았는데 ㅠㅠ
성공 못했었어요.
기초가 부족한가봅니다.
정창명님도 건강 챙겨가면서 늘 행복하세요 ^^
[...] 전 공유했던 ‘CSS Navigation Bar‘는 ‘수평+서브메뉴 드롭다운’ 네비게이션 이었는데요. 오늘 [...]
정찬명님;;; 제가 찾던게 이거에요!!! ㅠ_ㅠ
이거 소스 어떻게 다운 받을수 없을가용 ㅠㅠ
수정해서 좀 쓰고 싶습니다 ㅠㅠ
그전에 다른거 쎃었는데 익스8에서 버그가 잇더라구요;;;
근데 이거라면 해결 될거 같아요;
좀 알려주세요~
@이관규님
예제를 새 창으로 열기 하시고 소스보기를 통해서 HTML/CSS/JS를 제한 없이 내려받으실 수 있습니다. ^^
안녕하세요 정찬명님.
언제나 좋은 예제들과 자세한 설명으로 많은 도움 받고 있습니다..^^
제가 웹을 공부하는 학생이라 좀더 자세한 작동 원리를 알고싶어서 그런데요…
이 글과 관련해서 css/js소스를 보고싶은데 방법이 없을까요?
위에 남겨주신 댓글의 내용대로 새창으로 열어 소스 보기를 해도 js파일과 css파일은
src로 연결되있어 열어볼수가 없더라구요…
제가 모자란지라 말씀하신 방법이 뭔지 정확히 모르겠습니다..ㅠㅠ
좋은것만 냉큼 집어가려는것 같아 죄송하지만, 혹시나 괜찮으시다면 설명 부탁드립니다.
아무튼 이 글의 내용과는 관계없이 정말 좋은 포스팅과 좋은 소스들 너무너무 감사드리구요.. 프로그래밍을 공부하는 학생으로서 정찬명님과 같은 개발자를 닮아가고 싶네요..
그럼 늘 행복하세요.^^
@박지환님
제가 몇 일 전 관련 폴더를 정리하면서 새창으로 보기 링크를 잘 못 걸었더군요.
모든 소스 파일은 다음과 같습니다.
http://naradesign.net/ouif/uio/navigation/horizontal/bar/xhtml.html
http://naradesign.net/ouif/uio/navigation/horizontal/bar/hrBar.css
http://code.jquery.com/jquery-latest.js
http://naradesign.net/ouif/uio/navigation/horizontal/bar/hrBar.js
http://naradesign.net/ouif/uio/navigation/horizontal/bar/bgBar.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/bgBarActive.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/bgBarActiveHover.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/bgBarEnd.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/bgBarHover.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/iconHistory.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/iconSetup.png
http://naradesign.net/ouif/uio/navigation/horizontal/bar/iconSub.gif
예제 페이지를 통째로 저장(Ctrl+S) 하시면 한 번에 모든 파일을 저장 하실 수 있답니다. ^^
너무나 감사합니다…
같은(?) 개발자의 입장에서 고생해서 작성한 소스를 공개한다는게 얼마나 어려운일인지
깊게 통감하고 있는데 이리도 쉽게 공개해주시니 어떻게 고맙다는 말씀을 전해야 할지 모르겠습니다…
그리고 현재 학생의 신분으로 이제 취업을 눈앞에 두고있는 마당에 정찬명님 같은분과 같이 일해볼수 있다면 얼마나 좋을까.. 하는 생각도 해보게 되네요..
비록 전공은 웹이 아니고 현재도 자원봉사차 웹개발을 하고 있는 시점에 정찬명님의 글은 너무나 많은 도움이 됩니다…^^
아무튼 각설하고… 정말 정말 감사합니다~~
@박지환
자원봉사에 조금이나마 도움이 되다면 저의 기쁨입니다. ^^
감사합니다^^
너무 깔끔하네요~
잘 사용하겠습니닷~~~~!
@우림
넵, 잘 쓰시고 아쉬운점 있으시면 피드백 부탁 드립니다. ^^
안녕하세요 질문이 있어서요~
하나의 버튼에 마우스를 올렸을때
모든 서브 매뉴가 보이게 할려면 어느 부분을 수정해야 하나요~?
(동해물과 / 백두산이 등… 아래의 모든 서브 메뉴)
@액션
http://naradesign.net/ouif/uio/navigation/horizontal/bar/hrBar.js
이 파일에서 다음 두 라인을 지우고
li_list.removeClass(‘active’);
t.parent(‘li’).addClass(‘active’);
다음 코드로 대체 하시면 될껍니다.
li_list.addClass(‘active’);
그런데 모든 서브메뉴가 보여야 하는 상황이 문맥상 자연스러울 수가 있을까요?
@위의 질문에 이어서
아래부분을 적용했는데, 마우스를 올렸을때
sub매뉴만을 모두 보이게 하고 싶은데
위의 GNB 메뉴 모두에게도 마우스 오버 현상이나타납니다.
GNB메뉴 하나만 선택해도 모든 sub매뉴만 보이게 하고 싶습니다.
도와주세요ㅜ.ㅜ
—————————————————-
이 파일에서 다음 두 라인을 지우고
li_list.removeClass(‘active’);
t.parent(‘li’).addClass(‘active’);
다음 코드로 대체 하시면 될껍니다.
li_list.addClass(‘active’);
@액션
아래와 같이 수정해 보세요.
// Show Menu
function show_menu(){
t = $(this);
li_list.removeClass(‘active’);
t.parent(‘li’).addClass(‘active’);
li_list.find(‘.sub’).show(); // 액션님에게 필요한 라인이 여기 추가 되었습니다
// IE7 or IE7 documentMode bug fix
if($.browser.msie) {
var v = document.documentMode || parseInt($.browser.version);
if (v == 7) {
var subWidth = t.next(‘div.sub’).eq(-1).width();
t.next(‘div.sub’).css(‘width’,subWidth);
}
}
}
li_list.find(‘>a’).click(onselectmenu).mouseover(show_menu).focus(show_menu);
// Hide Menu
function hide_menu(){
li_list.removeClass(‘active’);
li_list.find(‘.sub’).hide(); // 액션님에게 필요한 라인이 여기 추가 되었습니다
}
menu.mouseleave(hide_menu);
li_list.find(‘div.sub>ul’).mouseleave(hide_menu);
@액션
만약 오른쪽에 있는 서브메뉴까지 펼치기를 원하시면 아래 추가된 2개의 라인을
li_list.find(‘.sub’).show();
li_list.find(‘.sub’).hide();
이렇게 바꿔보세요.
menu.find(‘.sub’).show();
menu.find(‘.sub’).hide();
정말 감사합니다. 이렇게까지 친절하게 해주시니 몸둘바를 모르겠네요~
도와주셔서 많은 부분 구현하였습니다
한가지 더 여쭐게요~
설명을 잘해주셔서 위처럼 구현이 됬습니다.
여기서 GNB메뉴의 전체 sub 메뉴가 내려왔을때
sub메뉴간 이동을할때 해당 GNB가 마우스over 된것처럼 선택되게 할수 있을까요~?
아 위에부분 해결했습니다.
function onselectmenu(){
…
}
li_list.find(‘.sub’).click(onselectmenu).mouseover(show_menu).focus(show_menu);
이 코드를 삽입으로 해결했습니다.
감사합니다 좋은 주말되세요~ ^^
@액션
잘 해결 되셨다니 다행이네요. ^^
위에서 질문했던 내용인데 이부분을 추가하고 나니
li에 링크걸었던 페이지가 나오지 않네요
클릭시 바로 아래부분이 실행되서 sub매뉴가 링크를 불러오기전에
없어져버립니다.
몇시간동안 파도 해결되지 않아 다시 질문드립니다~
링크또한 되게 하려면 어떻게 하나요~?
function hide_menu(){
li_list.removeClass(‘active’);
li_list.find(‘.sub’).hide(); // 액션님에게 필요한 라인이 여기 추가 되었습니다
}
아 위의 질문내용들은 모두 작동되면서 링크도 되는방법을 찾고 있습니다.
@액션
질문 내용을 잘 이해를 못하고 있습니다.
작성한 JS 코드 전체를 댓글로 붙여 주시고 문제 상황을 다시 한 번 설명해 주실 수 있을런지요?
저도 여기 소스 가져다가 씨름하면서 적용했어요.
정말 이 사이트 알고서 부터는 하다 막히면 이곳을 찾게 되는 것 같아요.
늘 고맙게 보고 있는데 감사하다는 덧글은 첨 남기네요.
다시한번 깊은 감사드려요~ 꾸벅~
@파스텔
제 소스와 씨름을 하시다니요. 앞으로는 씨름 말고 요리를 잘 해서 더 좋은 결과물 만들어 주세요. 감사합니다. ^^
CSS Navigation Bar. no jQuery 버전
2월 초, 이 곳의 오랜 손님인 정낙훈님께서 나라디자인 블로그에 CSS Navigation Bar 라는 글에 댓글로 제 홈페이지의 (제발 네비로 쓰지 말아주시고, 쓸 생각도 하지 말아주시길 간절히 부탁드리는 ㅠ)글인, 레이어 컨트롤 수정본의 링크를 걸어주신 관계로, 해당 링크로 인한 꽤 쏠쏠한 방문자 수 증가에 답(?) 하고자 해당 소스를 제작하신 분의 ‘이미 널리 쓰이고 있’다는 말씀에도 불구하고, 또, jQuery는 잘 만들어졌으면서도 확장성까지 좋다는, 훌륭한 js 라이브러리라는 의문의 여지가 없는 사실에도 불구하고, 그래도 어디의 누군가는 jQuery를 쓰고 있지 않을 수 있고, 상단 네비게이션 하나를 위해 굳이 jQuery를 로드하고 싶지 않다 라고 생각하시는 분이 있을 수 있다는 생각에 jQuery를 사용하지 않는 CSS Navigation Bar용 js를 만들어야겠다..라고 맘먹고 있었지만.. 여러가지 이유로 차일 피일 미루고 미루다.. 이제서야 맘 먹고 작업을 진행했습니다..
정찬명님 최고십니다.
저희나라 웹표준과 개발자로서 실력도 최고이고, 인품이 너무 좋으신거 같아요.
복 받으실겁니다. ^^;;
지진jsper님..
“저희나라”는 어느 나라인가요?
@지진jsper
최고라는 칭찬은 제가 듣기에는 과분한 것 같네요. 감사합니다. ^^
@액션님, 우리나라, 대한민국인데 제가 봐도 좀 표현이 이상했네요.
실력이 뛰어난 분은 많겠지만 이런 운영자분은 볼 수가 없었기에 제 눈엔 최고로 비춰져 그렇게 말한것인데, 혹 맘이 불편하셨다면 이해해주세요. ^^;;
@찬명님, IE6에서 문제점인데요.(IE7,FF 은 정상)
왼쪽 or 오른쪽으로 부유(float)시킨 사이드바에… 리스트탭 메뉴나 세로네비게이션을 넣으면, IE6에서는 리스트탭(세로네비)만 스크롤이 안됩니다. 마치 그것만 배너처럼 고정되는 현상이 발생하는데 어떻게 해결해야 하는지 알고 싶습니다.
덧) 저는 수 없이 많은 곳을 봤지만, 운영자나 쥔장님의 마인드가 이렇게까지 오픈되어 있고 친절(?)하신 분은 이전에 볼 수가 없어 감히 그런 말을 드렸습니다. 그렇기에 이곳을 많은 분들이 찾는거겠지요. 언제간 찬명님에게 좋은 피드백을 보낼 수 있도록 노력하겠습니다.
덧2) IE6 테스트는 ietester 로 했습니다.
@지친jsper
말씀하신 현상은 저도 평소에 격어보지 못한 현상이라서 URL을 통해 직접 확인을 해봐야지만 알 수 있을 것 같습니다. 일단 IE6 버그일 확률이 높은데요. IE 버그라는게 모든 상황에서 원인을 설명하기는 어렵지만 CSS 속성들을 이것저것 바꿔서 적용하다 보면 어렵지만 보통은 해결 방법을 찾을 수는 있거든요. URL을 공유해 주시면 한 번 테스트 해보도록 하겠습니다.
P.S. 친절하다고 하시니까 제가 도저히 친절하지 않을 수가 없겠네요. 빠져나갈 구멍을 안주시는군요. 지금도 충분히 과한 피드백을 주고 계십니다. ㅎㅎ
@찬명님, 봐주세요.(IE6에서만 안되는 문제)
http://onheart.com/test/index.html <- 이곳에 올렸습니다.
1) css/ie6.css 파일 때문에 문제가 발생하고 있습니다.
2) ie6.css 는 header 부분을 IE6에서 프레임처럼 고정해주기 위해 필요합니다.
3) html {
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
위 내용중 overflow 부분 2군데를 주석처리하면, 정상적으로 잘 작동됩니다.
하지만, header부분의 프레임효과도 같이 없어지고 스크롤 되어 버립니다. ㅠㅠ
P.S 바쁘실텐데.. 본의 아니게 부담을 드렸다면 죄송합니다.
@지친jsper
body의 자식 요소 가운데 position:relative 속성이 포함된 요소는 스크롤 시키지 않는 문제가 있네요. body 요소에 position:relative 속성을 부여하면 이 문제는 더 이상 발생하지 않지만 header는 고정할 수 없는 문제가 있구요.
달리 해결 방법은 못 찾았구요. 저라면 화면에 레이어를 고정시키기 위해서 IE6를 타겟으로 하는 자바스크립트를 사용할 것 같습니다. ^^
@찬명님
음.. 마땅한 해결방법은 없는거였군요.
안타깝긴 하지만 오히려 살짝 안심입니다. 간단한 문제였다면 해결은 됬겠지만 이런 것도 몰랐나하는 자괴감이.. ^^;;;
그래도, 끝까지 관심 가져주셔서 고맙습니다. 부디 하시는 일 잘 되시고, 저도 이 곳 홍보 많이 할께요. 그럼, 좋은 하루 되세요~ ^^
html5에 관심을 갖다 이렇게 좋은 사이트를 알게되어 기쁘기 이루 말할 수 없네요..
쌩뚱맞은 얘기지만 css를 잘 사용하려면 jQuery가 필수인가요? ^^;
@타자만짱
jQuery를 몰라도 CSS를 잘 사용하실 수 있습니다. HTML5는 저도 아직 초보 랍니다. ㅎㅎ.
홈페이지 작업하다 막막해서 서핑하다 정찬명님 홈페이지를 발견했습니다
소중한 소스 공개해주셔서 감사합니다
깔끔해서 알아보기도 쉽고 참 좋네요^^
좋군요..^^
안녕하세요.
매일 들어와 좋은 정보 많이 보고갑니다.
배울께 아주 많네요…
네비 한번 써보고 싶어서.. 가져왔는데.
링크로 페이지 넘어갈때
서브메뉴 한번 클릭하면 넘어가지 않고, 서브메뉴가 사라졌다가, 한번더 클릭하면 그때는 다른 페이지로 넘어가게 되네요.
왜 이런 버그가 나는 걸까요??
다운 받은 걸로 제 컴퓨터에서 링크걸어서 실행했을때는 그런 버그가 없었는데.. ㅠㅠ 도와주세요.. 왜 그럴까요?? ㅡ.ㅡ;;
http://192.168.0.10/inc/top_main_new.php
@이남경
링크해주신 사이트 접속이 안되네요. ^^
IE 6에서 drop down 메뉴 셈플 테스트 하다
여길 방문하게 되었어요~
님께서 만드신 위의 메뉴는 되리라 생각했는데…안되네요 역시…
(테스트 환경 : windows 2003server /Internet Explorer 6.0.3790.3959)
제가 보고 있는 샘플은 [ Cssmastery 2nd edition /챕터6 /dropdowns.htm ]입니다.
혹시 셈플보내드리면 봐주실수 있는지요 ^^
(가지고 계실지도 모르지만)
CSS 초보자로서 어떻게 접근을 해야할지 암담해서
이렇게 글을 남기네요~~ ^^;;
@ej
제가 만든 메뉴가 무엇이 안된다는 것인지 설명해 주실 수 있는지요?
아..죄송..알맹이 빠진 질문이었네요 ^^;;;
dece24앳gmail.com 로 셈플 사이트 알려드릴게요~~
IE6에서 서브 메뉴가 안뜨는 문제입니다
IE8에서는 잘되는 셈플이구용 ^^;;
책에 있는거 그대로 올린거에용
@ej
저는 이메일로는 질문을 받지 않습니다. 샘플은 봤는데요. 제가 작성한 코드가 아닙니다. li:hover 와 같은 가상 선택자는 IE 6~7 브라우저에서 지원하지 않기 때문에 서브 메뉴가 열리지 않는 것입니다. CSS만으로 서브메뉴를 여는 방식은 키보드 사용자가 사용할 수 없기 때문에 접근성이 없고 권장할 수 없는 방식입니다. 키보드로 탐색해 보면 서브메뉴에 접근할 수 없습니다. 결과적으로 권장할만한 예제가 못되므로 실무에서 사용하지 않는것이 좋겠습니다.
아..감사합니다.
댓글쓰기에
“전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.”
라고 되어 있길래 메일로 보내도 되는줄 알았네요 죄송합니다.
그래도 읽어봐주시고 설명도 잘해 주셔서 감사합니다.
IE8에서는 잘되고 IE6에서는 안되면
IE6과 8의 차이점 부터 봤어야하는건데..
제가 정말 기본이 안되어 있네요^^ 반성하구요..
구글검색해서 찾은거 올릴게요 ^^;;
“CSS Differences in Internet Explorer 6, 7 and 8″
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
그리고 소스 감사합니다..지금 열공중이랍니다.
볼수록 어렵고 심오하네요 ^^;;
디자인만 바꿔서 여기 올려도 되나요??
@ej
네, 얼마든지 가능합니다. ^^
제가 아직 잘 몰라서 그런데 마우스 오버했을 때 메뉴 텍스트 옆에 v부분 색상이 바뀌는거 어떻게 하신거에요?
span에다 이미지 넣고 span:hover해서 background:url을 바꾼거라고 생각했는데
span:hover가 안보이던거 같던데, 제가 못 찾은건지 모르겠지만 어떻게 하신지 좀 가르쳐 주세요ㅋ ㅜ
@장재원
마우스 오버시 li 요소에 active라는 클래스가 동적으로 들어가거나 빠집니다. 이 때 배경 이미지의 위치가 바뀌면서 숨어있던 다른 이미지를 보여줍니다.
.menu .major li.active .i{ background-position:center -50px; }