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

다운로드 받은 압축파일을 해제한후, index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림과 같은 탭메뉴를 화면에 표시해줍니다. 웹페이지에 탭메뉴를 구현해 둔 자바스크립트와, HTML소스코드는 예제가 매우 많지만, 탭메뉴의 개수, 적용되는 효과, 작동하는 이벤트 등의 이유로 다소 이용하기에 복잡한게 많습니다. 이 프로그램은 비교적 간단하게 사용할 수가 있어서 유용할것 같네요. 1. 위와 같이 ul, li 태그로 탭메뉴 부분을 만들고, 각 탭에 연결되는 컨텐츠를 코딩합니다. 2. jquery 와 tabs.js 가 로딩되도록 위 태그를 넣어줍니다. ​ ​3. ul 태그에 지정한 id 를 이용해서 위와 같은 스크립트로 탭메뉴를 활성화 시킬수 있습니다. 심플한 만큼 다양한 기..

라디오버튼의 checked를 이용한 탭메뉴입니다. 스크립트를 따로 이용하지 않으며 ie 하위버전의 브라우저에서는 보이지 않을 수 있습니다. 첫 포커스가 되는 메뉴는 checked지정하여 보여주고 checked가 되면 하부에 레이어를 보여주는 구조입니다. 첨부파일내에 디자인과 css가 포함되어 있습니다.

탭메뉴 클릭시 타이틀 텍스트가 출력됨고 동시에 위치가 변하는 에니메이션 효과입니다. html,css,js 파일을 사용합니다.

css 와 jquery 를 이용하여 아래와 같이 탭 메뉴를 생성할 수 있습니다. 소스는 아래와 같습니다. 스타일과 jquery 를 같이 사용하였습니다. 소스는 첨부파일에 html 파일을 zip 파일로 압축하여 첨부해두었으니 다운받아 사용하시기 바랍니다.