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

* Revealing Hero Effect with CSS & JavaScript 페이지가 스크롤 될 때 섹션별로 컨텐츠를 표시합니다 첨부된 압축파일을 다운로드하여 웹루트 디렉터리에 압축 해제합니다 적용한 html 문서를 열고 문서 상단에 제공되는 css 를 호출하도록 합니다 그리고 섹션별로 아래와 같이 페이지 스크롤 영역안에 들어갈 각 컨텐츠를 삽입할 수 있습니다 섹션별로 컨텐츠를 삽입할 영역을 다정한후 body 태그 위에 기본제공되는 js 파일을 아래와 같이 호출하도록 합니다 적용후 브라우저로 호출할시 아래와 같이 스크롤될때 각 섹션영역을 구분하면서 스크롤링 됨을 확인할 수 있습니다

준 HTML 태그인 를 키보드로 제어가 가능하고, 스킨으로 제작가능한 드롭 다운 목록으로 쉽게 변경이 가능한 JQUERY 플러그인 입니다. 다운로드 받은 압축파일의 해제를 한후에 dist/index.html 파일을 웹브라우저에서 열어서 보면 확인이 가능합니다. 태그로 생성된 기본이 선택상자를 와 , 태그로 변환이 되어서 드롭다운 메뉴를 구성하는 기본적인 샘플을 몇가지 볼수 있습니다. CSS를 지정하는 식으로, 다양한 모양으로 스킨화를 하는것도 가능하다고 설명이 되어 있네요. 샘플용 HTML 파일의 소스코드를 열어서 보면 이미 작성되어 있던 HTML태그를 많이 변경하지 않고도 적용이 가능해 보이네요. https://www.jqueryscript.net/form/Easy-jQuery-Based-Drop-Do..

열고 닫기 버튼을 통해 레이어를 닫고 열수 있습니다. css 만으로 작동하는 소스로 소스를 다운로드 받으실 수 있습니다.

* Jquery Drop down Menu 소개 - 크로스 브라우저 호환성 - CSS 메뉴로 액세스 할 수 있습니다. - 최적화 된 검색 엔진 - jQuery 드롭 다운 메뉴의 정렬되지 않은 목록 (LI 및 UL HTML 태그) 구조 지우기 - 설치 및 업데이트가 쉽습니다. - 환상적인 애니메이션 및 전환 효과 - 여러 가지 미리 색칠 된 색 구성표 - CSS로 완전히 사용자 정의 할 수있는 스타일링 * 설치방법 및 사용방법 - jquery 버전은 최소 1.3.2 버전 이상이면 되며 첨부된 파일을 다운로드 하여 원하시는 웹루트 디렉터리에 업로드하고 압축을 해제합니다 작업해야될 html 문서안에 jquery.js 와 menu.js 를 호출합니다 샘플소스의 태그 class들은 menu.css 에 선언되어있으..

복잡한 자바스크립트 소스 대신 간단하게 bootstrap을 활용한 드롭다운 메뉴 소스입니다. 기본 적인 1차 메뉴 구성 및 1차 메뉴 마우스 오버 효과는 물론이고 클래스 지정을 통해 간단하게 2차 드롭다운 메뉴 구성도 가능합니다. 다른 클래스(.nav-stacked) 지정으로 상하 메뉴 구성도 손쉽게 가능합니다.