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

메뉴버튼을 클릭하면 사이드메뉴가 펼쳐집니다.(1차메뉴) 1차메뉴를 클릭하면 2차메뉴가 1차메뉴 위로 펼쳐집니다. 이전메뉴를 볼려면 메뉴버튼을 클릭하면 이전메뉴로 돌아갑니다. 해당 사이트에서 소스확인 및 소스파일을 다운로드 받을 수 있습니다. 또는 첨부파일을 통해 소스파일을 다운로드 받을 수 있습니다.

모바일용 부드러운 메뉴를 만드는 css + JAVASCRIPT 입니다. css + JAVASCRIPT 를 이용하여, 부드러운 액션이 적용된 모바일 메뉴 소스입니다. CSS 전환 속도를 이용하여, 속도 설정도 가능하며, SVG 아이콘을 사용하여 원하는 메뉴로 쉽게 변경 사용이 가능합니다.

반응형으로 제작된 jQuery 사이트 메뉴 플러그인 SIDR입니다. 여타 다른 플러그인과 같은 사용법으로 하시면 됩니다. 테마는 총 3개를 지원하며, CSS 파일로 구분됩니다. 메뉴의 구동 방식은 3가지 이며, 다양한 옵션을 통해 구동위치, 기준점, 속도 등등을 제어할 수 있습니다.

JavaScript 및 CSS3가 포함 된 초경량 (2KB 미만) 코드로 원형 메뉴를 멋진 방식으로 표시합니다. 해당 플러그인은 순수한 JavaScript 및 CSS를 사용하였습니다. 메뉴에는 무거운 JavaScript 또는 CSS 라이브러리가 필요하지 않으므로 간단하고 가벼우 며 빠릅니다. 또한 추가 CSS 스타일로 완전히 사용자 정의 할 수 있습니다. 초기 단계에서 햄버거 아이콘이 표시되고 햄버거 아이콘을 클릭하면 메뉴가 펄쳐 집니다. 라이센스는 MIT 라이센스 이며 만든이는 Creative Punch 입니다.

jQuery 와 Bootstrap 을 이용한 목차를 만들 수 있습니다. 라이센스는 MIT Licence 입니다. selectors 를 이용하여 원하는 태그를 목차의 메뉴로 설정할 수 있습니다. 옵션은 다양하게 존재합니다.

"메뉴1" 에 해당하는 스크롤 영역의 위치를 보시면 최상단에 배치되어있습니다. 스크롤을 계속해서 내리게되면 아래와 같이 "메뉴2" 에 해당하는 스크롤에 위치하면 메뉴2 부분이 활성화 됩니다. 해당 소스는 메뉴의 갯수 제한없이 본문영역내에 id 값을 추가로 늘리고, 메뉴의 싱크만 맞춰주시면 무한대로 늘릴 수 있습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴1 본문영역 메뉴2 본문영역 메뉴3 본문영역 메뉴4 본문영역 메뉴3 본문영역 메뉴4 본문영역

이미지부터 템플릿, 메뉴등 웹사이트에 이용할 수 있는 다양한 퍼포먼스를 확인할 수 있으며,관련 소스를 분석하여 홈페이지내에 반영도 가능한 소스모음사이트입니다. 카테고리별로 원하시는 효과를 확인합니다 이용하는 방법은 아래와 같습니다. 1) 원하는 효과를 확인합니다. - 1585 번째 이미지 마우스 오버효과를 확인합니다. 2) 해당 소스의 html 소스를 확인합니다. - class="snip1585" 라는 css 를 이용하는것을 확인할 수 있습니다. 3) 관련 css 소스를 확인하여 최종 웹사이트에 적용할 소스 구조를 확인하여 응용/사용이 가능합니다. 이로인해 원하는 효과를 사전에 구조파악이 쉽고, 응용하여 효과를 적용할 수 있습니다.

안녕하세요 모바일에서 사용하면 괜찮은 jquery 입니다. PC 에 사용해도 상관은 없지만 모바일에 더 잘 어울릴꺼 같아요 ^^; 기본적인 HTML 은 아래와 같은 구성을 가지고 있습니다. Menu Panel 스타일도 당연히 따라오겠죠 ^^body { width: 100%; height: 100%; } .slideout-menu { position: fixed; top: 0; bottom: 0; width: 256px; min-height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 0; display: none; } .slideout-menu-left { left: 0; } .slideout-menu-right { ri..

하이라이트 되는 애니메이션 메뉴 CSS3 입니다. 익스플로러 10 이상, 크롬, 파폭에서 실행이 가능한 소스입니다. 첨부파일에 해당 html 파일과 css 파일이 첨부되어있습니다.

원하는 가장자리에 슬라이트로 메뉴를 출력할 수 있도록 하는 PC 모바일 모두 사용이 가능한 jQuery plugin 입니다. http://mmenu.frebsite.nl/examples.html 에서 샘플을 확인하실 수 있습니다. MIT license 에 벗어나지 않는 범위에서 자유로이 사용 가능합니다.