웹솔루션개발 25년 노하우! 해피CGI의 모든것

우측의 오픈메뉴 버튼을 클릭하면 좌측에 사이드메뉴 출력 3단꼐의 사이드 메뉴이고 하부메뉴로 갈시 레이어가 이전메뉴의 레이어를 밀어내면서 출력이됩니다. 모바일 웹이나 앱에 사용될수 있는 메뉴형태입니다. 총 3가지 타입이 있습니다. 상위레벨의 메뉴가 밀려나는 형태 상위메뉴를 덮고 백링크가 출력되는 형태 위의 두가지를 합친 형태가 있습니다.

클릭하면 아래 이미지로 변경이 됩니다. 해당 사이트에서 html, css, js 소스를 확인할 수 있습니다.

사이트이동후 원하는 메뉴를 선택합니다. 선택한 메뉴페이지 입니다. 하단의 다운로드 소스를 클릭하신 후 압축파일을 다운받습니다. 다운받은 압축파일을 풀면 해당 메뉴의 html/css/js파일을 확인 하실 수 있습니다. 다운받은 메뉴를 확인하실 수 있습니다.

마우스와 키보드 모두 상호작용이 가능한 jquery 테마메뉴 위젯 소스입니다. 기본적인 1차메뉴 구성은 물론 2차 메뉴 구성까지 가능한 jquery 테마메뉴 소스입니다. 활성화된 메뉴와 비활성화된 메뉴의 스타일 제어도 가능합니다. 마우스 및 키보드의 방향키를 이용하여 메뉴 탐색이 가능합니다. 간단한 소스 삽입과 편집으로 활용이 가능합니다.

위와같은 vertical 형태의 메뉴를 구현할 수 있는 스크립트 소스입니다. 사이트에 소개된 stylesheet 와 js 소스의 조합으로 비교적 간단하게 구현이 가능한 스크립트 소스로 vertical menu horizontal menu folder view 등 다양한 모양을 구현할 수 있는 js 소스를 적용할 수 있습니다.

JQuery CSS3 으로 3단계의 메뉴를 표현간 간단 드롭다운 탐색 메뉴입니다. 반응형으로 되어 있어, 화면크기에 따라 조정됩니다. [데모사이트] https://www.freshdesignweb.com/demo/2013/08/3_level_responsive_drop_down_navigation_menu/

구글 넥스서사이트 형태의 메뉴입니다. 링크에서 데모사이트와 파일을 다운받으실 수 있으며 반응형 사이트 또는 모바일에 적용하시면 좋은 소스같습니다. css3를 이용하기 때문에 ie하위버전에서는 정상적으로 동작을 하지 않을 수 도 있습니다. 사이트 제작에 많은 도움이 되시길 바랍니다 ^^