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

sign in을 누를시 슬라이드 형태의 로그인창으로 각 버튼을 누를때 슬라이딩 효과와 함께 폼이 나타나게 됩니다. sign up을 누를시 데모사이트를 누르시면 html/css/js 모두 있음으로 소스를 참고하여 다른 결과물을 만들어내기도 좋은 소스 같습니다.

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

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

css를 이용하여 슬라이딩 되는 탭메뉴 입니다. 탭메뉴를 클릭하면 활성화된 탭 효과가 슬라이딩으로 이동됩니다. css 만으로 구현된 탭메뉴 해당 사이트에서 자세한 소스 확인이 가능합니다.

SlideMenu.js는 모바일 터치를 지원하는 쉬운 오프 캔버스 메뉴입니다. * License - MIT License * 설치방법 - 첨부된 압축파일을 다운로드하여 압축해제후 원하는 경로에 업로드한다 - html 문서상에서 부분에 아래와 같은 코드를 삽입해줍니다 jquery 파일 호출은 SlideMenu 파일들이 호출되기전에 호출해야합니다 - 간단히 적용된 샘플코드는 아래와 같습니다 - 슬라이드 메뉴 옵션은 다음과 같습니다 옵션 설명 options.percent 메뉴를 여는 최소크기를 지정합니다(기본값 0.25) options.area 왼쪽에서 터치 영역의 크기를 지정합니다(기본값 0.1) options.debug 콘솔을 통한 응용 프로그램 출력을 설정합니다(기본값 false) options.clos..