태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

티스토리 툴바

By 얄개, With (13) Comments

  'CSS & Javascript' 를 이용한 드롭다운 메뉴(Drop-Down Menu)

  드롭다운(풀다운) 메뉴는 웹 디자인시 필수 항목이라고 말할 정도로 중요한 부분을 차지한다. 또한 메뉴 자체를 어떻게 구성하느냐에 따라 웹 디자인의 전체적인 구성 및 친화적인 이미지에도 많은 영향을 미친다. 드롭다운 메뉴의 특징은 카테고리와 서브 카테고리의 효율적인 관리에 용이하다는 점이다. 

  그렇다면, 어떻게 드롭다운 메뉴를 쉽고 간편한게 만들 수 있을까? 해답은 의외로 간단하다.

  전문가 입장에서 보면 별거 아닌 것처럼 느껴지겠지만, 사실 나와 같은 초보들에게는 이 보다 좋은 방법은 없을 것이다. 그럼 지금부터 CSSJavascript를 이용해서 다양한 모양의 드롭다운 메뉴를 만들 수 있는 방법에 대해서 알아보자.




  CSS만을 이용한 드롭다운 메뉴 (CSS Only)


Javascript 사용에 어려움을 느끼는 사람들도 쉽게 사용할 수 있는 CSS 전용 드롭다운 메뉴.

1. Free CSS Drop-Down Menu Framework

  

[Demo]

더보기


2. The Ultimate CSS only Drop-Down Menu



[Demo]

더보기


3. CSS Express Drop-Down Menu



[Demo]


  CSS + Javascript 메뉴


Javascript를 이용한 드롭다운 메뉴는 CSS 전용에 비해 모양과 느낌 아울러 섬세하고 에니메이션적인 요소가 가미된 메뉴를 만들 수 있는 장점이 있다.

1. Javascript Drop-Down Menu with Multi Levels



[Demo]

더보기


2. All Levels Navigational Menu (v2.2)



[Demo]

더보기


3. Professional Drop-Down #1



[Demo]

더보기


4. Drop-Down Tabs (5 Styles)




5. Chrome CSS Drop-Down Menu (v2.5)




* 상용 목적이 아닌 경우 사용이 가능합니다.
* 각 사이트별로 사용법 및 적용 방법 등이 자세하게 설명되어 있으니 참고하시기 바랍니다.




     
얄개 블로그는 사회적 이슈와 다양한 정보 등이 공유되길 희망합니다. 블로그의 모든 글은 누구나 공유할 수 있습니다. 'Twitter', 'Facebook' 은 물론이고 "Share" 를 누르면 E-mail, 구글, 피드버너 등으로도 보실 수 있습니다. 단, 글을 사용하실 경우 꼭 출처(얄개's Blog)를 밝혀주시길 부탁드립니다.

댓글을 달아 주세요

  1. 좋은 강의 보고 가용..

    행복하고 건강한 하루되세요^^

  2. 하나 하나 차근 차근 따라해보면 될텐데
    자꾸 어렵다는 생각이 먼저드니...

  3. 이건 뭔지 잘 모르겠네요.
    워낙 컴맹에 가깝다보니...ㅠㅠ

  4. 잘..공부하고 갑니다^^
    주말 행복하세요^^/

  5. 아 저도 이거 하나 해보려다가... 너무 복잡해서 포기했었떤 슬픈 기억이 ㅠㅠ

  6. 예전에 적어놓은 글이 있어서 트랙백 몇게 걸쳐 두고 갑니당~ ^^

  7. 좋은 글 감사합니다