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

마우스 오버시 애니메이션 효과가 나타나는 버튼 5개 입니다. 자바스크립트를 사용하지 않고 CSS만으로 구현하였습니다. 홈페이지에 포인트를 주고 싶을때 여러가지 효과를 낼 수 있습니다. CSS에서 효과를 수정 가능합니다. 예를들어 첫번재 버튼에 마우스 오버시 나타나는 효과를 변경하려면 이 부분을 수정하면 됩니다.

자바스크립트와 CSS를 이용하여 제작된 아코디언 메뉴 Accordion Tab입니다. 기본적으로 HTML로 구성하고, 자바스크립트 + CSS로 제작되었습니다. 애니메이션의 속도 및 디자인은 CSS로 조절이 가능합니다. 개수제한없이 html 편집에 따라서 조절이 가능합니다. 서브 메뉴나, 액션을 가미한 설명에 사용이 가능한 소스네요

전체메뉴 아이콘을 클릭하면 좌측에서 기존 컨텐츠를 밀면서 출력이 됩니다.

탭을 클릭하면 해당 탭의 컨텐츠가 슬라이딩 되면서 변경됩니다. css와 js 로 구현되어 있습니다. 해당 사이트에서 소스코드 확인 및 다운로드가 가능합니다. 첨부파일에서 소스를 다운로드 받으실 수 있습니다.

사이드에서 1차 메뉴 마우스 오버시 2차 메뉴가 나오는 jQuery 높이는 1차 메뉴 영역 높이에 맞춰서 나옵니다. CSS내 2차메뉴 좌우 위치값과 스크립트내 좌우 위치값을 변경하시면 오른쪽에서 나오는 메뉴로도 변경이 가능하며, 나오는 애니메니션 속도 설정도 가능합니다. 가장 기본적이지만, 활용도가 높은 소스입니다.

* Slide Out Box Menu 각 섹션별로 원하는 페이지를 슬라이드 하여 보여주는 기능을 가진 플러그인입니다 첨부된 압축파일을 다운받아 적용하고자하는 웹루트 디렉터리에 압축을 해제합니다 기본제공되는 css 파일을 문서상단에 호출합니다 아래와 같이 각 섹션페이지 별로 슬라이드해줄 컨텐츠를 삽입합니다 detail 레이어 부분 코드 body 태그 위에 제공되는 js 파일을 삽입합니다 위와 같이 적용하였을때 슬라이드 페이지 및 레이어로 정보를 노출하고 싶은 부분을 보여줄 수 있습니다 첨부된 압축파일에 제공되는 샘플파일들을 참고 및 응용하여 작업하면 도움이 될것 같습니다

* Infinitely Scrollable Vertical Menu 메뉴를 반복스크롤 하여 무한으로 보여줄수 있는 기능 * License MIT LICENSE * 적용방법 첨부된 압축파일을 해제하여 웹루트 디렉터리에 업로드 합니다 상단에 css 와 script 를 호출합니다 ​ 스크롤을 적용할 메뉴부분의 html 및 script 를 작성합니다 적용할 html 문서에 항목이 보이는 영역에 맞는만큼 많은 클론이 필요합니다. 예를 들어, 8 개의 항목이 뷰포트의 높이에 맞으면 8 개의 복제본을 만들어야합니다 (class 의 경우 샘플파일 base.98fd6c19.css 에서 확인이 가능합니다) 웹페이지로 호출하면 아래와 같은 무한 스크롤 메뉴를 확인할 수 있습니다 첨부된 압축파일을 해제하여 샘플파일 index..

* Menu Hover Image Animation 이미지 호버 효과 (Image Reveal Hover Effects)를 제공하며 메뉴 항목을 가리킬 때 멋진 애니메이션으로 이미지를 보여줍니다. * License MIT License * 적용방법 첨부된 압축파일을 다운로드하여 적용할 웹루트 디렉터리에 압축을 해제하여 위치합니다 html 문서상에 상단에css 및 script 를 선언합니다 각 메뉴 및 이미지를 아래와 같이 선언합니다 (관련 class 참고 및 확인은 base.98fd6c19.css 에서 확인이 가능합니다) body 끝나는 지점 윗부분에 js 파일을 불러오도록 선언해줍니다 페이지 호출시 아래와 같은 메뉴효과를 확인할 수 있습니다 ​첨부된 압축파일을 해제하여 index.html 파일의 예제를..

마우스오버시 부드럽게 펼쳐지는 slide 메뉴로 jquery 를 이용하여 제작한 간단하지만 별도 설명없이 퓨어하게 이용할 수 있는 간단한 메뉴스크립트 소스입니다. 메뉴영역을 마우스 오버하면 부드럽게 열리는 서브메뉴 레이어가 출력되고, 영역을 벗어나면 부드럽게 닫기는 형태까지 적용된 간단한 메뉴효과입니다. 위 소스가 핵심사항으로 서브메뉴가 슬라이드 다운된 상태를 유지하고 마우스가 아웃되면 slideUp 을 진행하는 코드입니다. 소스상에 항목 안에 1차에 해당하는 메뉴 디자인을 넣으시면 되고 항목안에 2차 서브메뉴에 해당하는 디자인을 하셔서 이용하실 수 있습니다.

Windows 파일 탐색기 스타일의 드롭다운 메뉴를 생성하는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하면 생기는 index.html 을 웹브라우저로 열어서 보면 확인이 가능합니다. 웹페이지에 위 그림과 같은 메뉴를 구현하는 예제입니다. index.html 파일의 소스코드를 보면, 메뉴를 추가하거나, 삭제하는게 그리 어려워 보이진 않네요. ul, li 태그를 이용해서 화면에 출력되는 메뉴의 순서 및 텍스트를 쉽게 조절이 가능합니다. 각 메뉴에 해당하는 기능을 구현하는건 제법 일이 많을듯 하네요. 윈도우 탐색기의 파일메뉴와 같은 모양으로, 웹페이지로 이동하는 단순한 메뉴들을 구성하려고 할때 사용하면 괜찮을듯 합니다. ​