[해피CGI][cgimall] jquery Sliding Panels Template

* jquery Sliding Panels Template

   - 선택된 프로젝트에 대한 내용을 슬라이드 효과로 보여주는 기능이 있습니다
 

* 사용방법

   - HTML 구조는 정렬되지 않는 두개의 목록 , 
     프로젝트 미리보기 이미지의 ul.cd-projects-previews , ul.cd-projects-title 
     nav.cd-primary-nav 로 구성됩니다

 

 

 

<li> 의 너비는 뷰포트 높이의 1/4에 해당하며 하위 요소의 배경이미지로 설정됩니다
높이가 뷰포트 높이와 같고 전체 뷰포트를 덮기 위해 맨위로 변환됩니다

 

.cd-projects > li 에서 각 목록 항목은 절대 위치, 너비와 높이가 
각각 뷰포트 높이와 같으며 기본적으로 숨겨져 있습니다

 

 

 

HTML 문서에 적용하였을때 기본적으로 아래와 같이 코드가 삽입됩니다
css, js 선언부

 

 

 

각 프로젝트 영역별 보여줘야할 디자인 영역

 

 

 

 

위와 같이 적용이 되었을때 프로젝트별 선택화면이 출력되고

 

보고 싶은 프로젝트 클릭시 아래와 같이 세부내용을 확인할 수 있도록 보여줍니다