[css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포)

[css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포)

지금까지 드롭다운 메뉴 만들기를 3단까지 모두 배웠습니다.

오늘은 CSS3의 속성들을 이용해서 디자인까지 고려하여

드롭다운 메뉴를 만들어 보겠습니다.

우선 드롭다운 메뉴를 만드는 html/css 작성법이 여러가지가 있겠지만

이 사람은 이렇게 만드는구나 정도로 생각해주시면 고맙겠습니다.^^

이 소스들을 다운 받아서 자유롭게 편집해서 사용하실 수 있습니다.

(단, 이 소스를 그대로 다운받아 배포하는 것은 금지)

모든 브라우저를 확인해 보진 못했고, ie7, chrome 39.0, Firefox 33.1 에서 정상 작동하는 것을 확인했습니다.

물론 css3를 지원하지 않는 브라우저에서는 박스 그림자나, 둥근 모서리 등의 효과가 나오지 않지만요...^^

그리고, 메뉴에 마우스 오버가 아니라 클릭했을 때 부메뉴가 나오는 방식은

제가 좀 더 공부해서 관련 글을 작성해 보도록 할게요.^^

Ⅰ. 2단 드롭다운 메뉴(border-radius 활용)

border-radius를 사용하여 외곽선을 부드럽게 처리한 것이 특징입니다.

또한 1단 메뉴와 2단 메뉴가 배경 색을 달리 사용하였고, 끝처리도 조금 틀립니다.

소스는 각 이미지 밑에 파일 다운 받아 활용하세요

Ⅱ. 2단 드롭다운 메뉴(border-radius 활용 2)

마찬가지로 border-radius를 사용했고, 이렇게 원형이 되려면 너비, 높이가 같은 값이어야 합니다.

신호등처럼 각 메뉴를 노색, 빨간, 초록으로 달리 표시해도 좋을 것 같아요.

Ⅲ. 2단 드롭다운 메뉴(box-shadow 활용)

박스에 그림자 효과를 사용해서 입체적으로 보이게 했습니다.

아래 링크 참조하시면 그림자를 만드는 다양한 방법이 나옵니다.

Ⅳ. 2단 드롭다운 메뉴(box-shadow 활용 2)

dropdown 2단(shadow).htm

Ⅴ. 3단 드롭다운 메뉴(simple)

디자인이 심플합니다.

Ⅵ. 3단 드롭다운 메뉴(simple2)

이것 역시, box-shadow 속성을 활용했습니다.