CSS 드롭다운 메뉴 만들기

CSS 드롭다운 메뉴는 Jquery에 비해 메뉴가 로딩되는 시간이 짧고, 브라우저에서 자바스크립트 기능을 꺼버려도 사용이 가능하다는 장점이 있지만, 하위 메뉴가 열리고 닫히는 시간이 조금 빠르기 때문에, 펼쳐진 하위메뉴로 마우스를 갖다대기도 전에 하위메뉴가 다시 닫혀버리는 경우가 종종 발생하는 단점이 있습니다.

하지만, Jqeury를 사용하면 메뉴가 닫히고 열리는 타이밍이 조절가능하며, 다양한 효과도 낼 수 있고 적용하기도 쉽기 때문에, 대부분의 드롭다운 메뉴는 자바스크립트를 이용한 Jquery를 사용합니다. 그렇다고 CSS를 대충 작성하면 브라우저의 자바스크립트 기능을 꺼버릴 경우 메뉴가 제대로 작동하지 않게 되므로 Jquery를 사용하더라도 기본적으로 CSS로 드롭다운이 되게 해 놓는 것이 좋습니다.

CSS Drop Down Menu의 종류

Jquery Dropdown 메뉴는 많았는데, CSS로 된 메뉴는 별로 없었습니다.

• Free CSS Drop-Down Menu Framework : 다단계 드롭다운 메뉴, IE6 브라우저를 제외한 대부분의 브라우저와 호환, IE6에서는 Jquery 사용
• CSS3 Dropdown Menu : CSS3를 사용한 멀티 드랍다운 메뉴, IE6을 제외한 대부분의 브라우저와 호환, IE6은 Jquery를 사용( 데모 )
• A cross-browser drop-down cascading validating menu : IE6을 포함한 대부분의 브라우저와 호환, 개인 웹사이트에 사용시에는 CSS 파일에 원작자의 웹 주소 표기해야 함, 상업용일 경우 원작자의 허락을 받아야 함.
• CSS Express Drop-Down Menus : 1 단계 드롭다운 메뉴( 데모 ), IE6을 포함한 대부분의 브라우저와 호환