자바스크립트 없이 메뉴 만들기

CSS Play에는 여러 가지 메뉴의 예제를 보여주고 있다. 각각의 예제는 대부분 IE6를 비롯한 주요 브라우저와 호환된다. 이번에 'Professional dropline / dropdown / flyout version 2 - hybrid menu'라는 예제를 추가했는데 1. IE6에서도 작동된다는 점, 2. 자바스크립트를 사용하고 있지 않다는 점. 때문에 구현 방식에 호기심을 가지고 소스를 분석해 봤다. 나는 어리석게도 아직까지 자바스크립트를 사용하지 않고서는 IE6에서 이와 같은 메뉴를 구현할 수 없다고 생각했다. 한번 들인 습관(자바스크립트를 이용해서 브라우저 호환성을 맞추는) 때문에 좀 더 나은 방법을 찾아볼 생각까지를 하지 못했던 거다. (이런 멍청한!)

2단 수평 메뉴와 드롭다운 메뉴, 플라잉 메뉴까지 총 4단계 깊이의 복합 메뉴를 구현했다

CSS Play의 이 복합 메뉴는 일반적으로 사용되는 2단계 수평 메뉴에 수직으로 떨어지는 드롭다운 메뉴를 붙이고, 다시 4단계 깊이의 메뉴를 플라잉 메뉴로 설계했다. 왠만한 복잡도의 메뉴를 처리할 수 있을만큼인데 이를 CSS만으로 처리했다는 것이 더 멋지다.

CSS Play는 자신들의 예제를 파일로 제공해 주지는 않는다. 개인 웹사이트 사용자들에게는 스타일시트 내에 CSS Play 링크를 유지해 줌으로써 사용을 허락하지만, 상업적인 경우 비용을 지불할 것을 요구하고 있다. HTML과 CSS만으로 만들어진 소스를 돈 내고 써야 하는게 맞는건지는 잘 모르겠지만 그렇게 적혀 있다. 어쨌든 CSS Play에서 다운로드를 제공해주지 않았기 때문에 그저 원본 소스를 열어놓고, 디자인 부분을 제외하고 그대로 재현해 봤다. ID 및 Class 명까지도 새로 작성했고, 스타일시트 역시 원리만 차용하고 내가 직접 다 다시 작성했다. 물론 원본을 따라가다 보니 방식은 동일하다. CSS Play도 다운로드만 제공하지 않을 뿐이지 소스 보기 까지 막아둔 것은 아니기 때문에 문제가 없을 것이라고 생각한다. (이미 출처도 밝혔고!)

아래 소스 부터는 제가 직접 코딩한 내용입니다. 원본가 다를 수 있으니 좀 더 정확히 파악해 보시고 싶으신 분들은 꼭 원본을 확인해 보세요.

기본적인 마크업은 다음과 같다:


  <div id="gnb"> <ul class="main"> <li><a href="#menu-1"><span>Menu1</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li class="sub-1 has-drop"><a href="#"><span>Sub-1</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#"><span>Drop-1</span></a></li> <li><a href="#"><span>Drop-2</span></a></li> <li class="has-fly"><a href="#"><span>Drop-3</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#"><span>Fly-1</span></a></li> <li><a href="#"><span>Fly-2</span></a></li> <li><a href="#"><span>Fly-3</span></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="sub-2"><a href="#"><span>Sub-2</span></a></li> <li class="sub-3"><a href="#"><span>Sub-3</span></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#menu-2"><span>Menu-2</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li class="sub-1 has-drop"><a href="#"><span>Sub-1</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#"><span>Drop-1</span></a></li> <li><a href="#"><span>Drop-2</span></a></li> <li><a href="#"><span>Drop-3</span></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="sub-2"><a href="#"><span>Sub-2</span></a></li> <li class="sub-3 has-drop"><a href="#"><span>Sub-3</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#"><span>Drop-1</span></a></li> <li><a href="#"><span>Drop-2</span></a></li> <li><a href="#"><span>Drop-3</span></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#menu-3"><span>Menu-3</span></a></li> </ul> </div>

골치 아팠던 스타일시트는 아래와 같다:
#gnb { position:relative; width:500px; height:30px; background-color:#093; } #gnb ul { list-style:none; white-space:nowrap; margin:0; padding:0; } #gnb li { float:left; } #gnb a { color:#fff; font-size:.85em; font-family:AppleGothic; text-decoration:none; } #gnb a span { display:block; float:left; cursor:pointer; } #gnb a:hover { color:#FF0; } #gnb .main a { display:block; float:left; height:30px; line-height:30px; white-space:nowrap; } #gnb .main a span { height:30px; padding:0 10px; } #gnb .sub,#gnb .sub ul { display:none; } #gnb table { border-collapse:collapse; font-size:1.2em; width:0; height:0; margin:-1px -10px; } #gnb .main :hover .sub { display:block; position:absolute; float:left; top:30px; left:0; width:500px; height:25px; background-color:#063; } #gnb .main :hover .sub li a { display:block; height:25px; line-height:25px; float:left; background-color:#063; } #gnb .main :hover .sub li.has-drop a { height:23px; border-bottom:2px solid #3c9; } #gnb .main :hover .sub :hover ul { display:block; position:absolute; left:0; top:25px; width:100px; } #gnb .main :hover .sub :hover ul ul { position:absolute; left:-9999px; } #gnb .main :hover .sub :hover ul li a { height:20px; line-height:20px; border-bottom:0; background-color:#3c9; } #gnb .main :hover .sub :hover ul :hover ul { left:60px; top:1px; width:60px; } #gnb .main :hover .sub :hover ul :hover ul li a { background-color:#399; } #gnb .main,#gnb .main li { height:30px; } #gnb .main a:hover,#gnb .main li:hover a,#gnb .main :hover .sub li a:hover,#gnb .main :hover .sub li :hover a,#gnb .main :hover .sub :hover ul li a:hover,#gnb .main :hover .sub :hover ul li :hover a,#gnb .main :hover .sub :hover ul :hover ul a:hover,#gnb .main :hover .sub :hover ul :hover ul :hover a { background-color:#000; } #gnb .main :hover .sub li,#gnb .main :hover .sub li a span { height:25px; } #gnb .main :hover .sub li a:hover,#gnb .main :hover .sub li:hover { position:relative; } #gnb .main :hover .sub :hover ul li,#gnb .main :hover .sub :hover ul li a span { height:20px; }

디자인이 적용되지 않은 형태이긴 하지만 거의 그대로 재현되었다.

사실 IE6를 포기한다면 CSS만을 이용해서 위와 같은 메뉴를 만드는 것은 크게 어렵지 않다. 나 역시 거기까진 원본 소스를 보지 않고도 비슷하게 맞출 수 있었다. 역시 난관은 IE6의 호환성 부분이었는데 열쇠는 HTML에 있다. HTML 소스를 확인해 보면 조건부 주석(Conditional Comments)을 이용해서 IE6과 IE7을 처리하는 부분이 있다.

<li class="has-fly"><a href="#"><span>Drop-3</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#"><span>Fly-1</span></a></li> <li><a href="#"><span>Fly-2</span></a></li> <li><a href="#"><span>Fly-3</span></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

<li>요소의 첫번째 자식 요소인 <a> 요소에 대해서 주건부 주석(IE7 일 때 </a>요소를 적용)이 한 번 쓰이고, 두번째 자식 요소인 <ul>요소를 IE6 이하일 때 <table> 요소로 감싸도록 하고 있다. 즉, 첫번째 자식 요소인 <a>요소의 링크 범위를 설정하기 위한 것과 두번째 자식 요소인 <ul>요소를 IE6에서도 표현하기 위해서 <table>요소를 적용한 것이다.

* 아내 내용부터 약간 보완 수정되었습니다.

하지만 IE6에서 표가 아닌 경우에 <table> 요소를 적용한 방법이 과연 정직한 것인지에 대한 고민을 해 봐야할 것 같다. 표가 아닌 경우에 <table> 요소를 적용함으로써 의미 있는 마크업으로써의 지향을 포기하게 되고, 다시 블록요소인 <ul>요소를 인라인 요소 <a>로 감싸고 있는 형국은 웹표준을 바라던 우리들 가슴을 먹먹하게 만드는 부분이 아닐 수 없다. 또, CSS만으로 처리를 하다 보니 감추어진 하위 메뉴들에 대한 키보드 접근성 문제가 발생(정찬명님께서 지적해 주셨습니다. 감사합니다.)하고 있는 것도 문제가 될 수 있다.

개인적으로는 조건부 주석도 사용하지 않고, 그래서 IE6에서라도 <table>요소를 사용하지 않고, 자바스크립트도 지원하지 않은채 사이트에 적용하는 방법도 최선책은 아니지만 차선책으로 결코 나쁘진 않다고 본다. 즉, IE6사용자들에게는 주메뉴(1단계 메뉴)만 제공하고, IE7이상의 사용자들에게는 모든 기능(4단계 깊이까지 모두 들어가지는 복합 메뉴)을 다 제공하는 것이다. 나로써는 이런 방법도 최소한의 접근성을 보장해 주는 것이라고 생각(주메뉴에서 하위메뉴가 출력되지 않는다고 해서 무조건 접근성이 없다고 보진 않는다. 단, 최종 컨텐츠까지 이동하는데 필요한 네비게이션-메뉴-는 충분히 제공되어야 한다.)하기 때문이다. 반대로 IE6 사용자들이 조금 더 편하게 사이트를 운용하기 위해 스스로 브라우저를 업그래이드 시킬 수 있도록 유도하는 기능까지도 가져볼 수 있지 않을까 싶다.

마지막에 사설이 길었는데 결론을 붙이자면 CSS Play의 이 복합 메뉴 코드는 꽤 인상적이며, 그동안 나 처럼 자바스크립트 없이 절대 IE6까지 호환되는 복합 메뉴를 만들 수 없어!라고 생각했던 사람들이 있다면 좋은 예제 코드가 될 것이라고 생각한다. 하지만 여러분들의 의견을 듣고, 좀 더 생각을 정리한 후에 내린 결론은CSS Play의 원 소스는 '학습용' 이상의 가치를 갖기는 어렵다이다. 위에서 지적된 문제들이 그 이유가 될 것이다. 그렇지만 이 소스를 아주 쓰지 못할 것은 아닌것 같다. 자바스크립트를 적당히 적용할 수 있다면 키보드 접근성 문제를 해결할 수도 있다.