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

좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 css 소스 일부입니다.

두가지 형태와 다양한 에니메이션 효과가 있는 토글 버튼 소스입니다.css 만으로 구현되어 있기에 커스터마이징을 쉽게 할 수 있습니다.모양은 동일해도 에니메이션에 차이가 있습니다.해당 사이트에서 버튼별로 css 소스를 확인할 수 있습니다.첨부된 파일을 다운로드 받으셔서 직접 확인도 가능합니다.

닫혀있는 상태 열려있는 상태 체크박스 버튼 닫혀있는 상태의 버튼 css 열려있는 상태의 버튼 css

head 사이에 css 를 추가하고 사용하면 됩니다. html 은 위처럼 사용하면 되며 class 명만 바꾸면 됩니다. 다양한 디자인이 있습니다. https://jnkkkk.github.io/MoreToggles.css/ 위의 링크에서 더 많은 디자인을 확인해 보세요.

데모 확인은 다운로드 받은 파일의 압축을 해제한 뒤 demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 길이가 긴 텍스트를 웹브라우저의 화면크기에 따라서 위 그림 처럼 텍스트의 일부는 화면에 표시를 해주고, 나머지 텍스트들은 show more 링크를 눌러보면, 감추어져 있던 텍스트들이 화면에 애니메이션 효과와 함께 표시가 됩니다. 웹브라우저의 크기를 조절을 해보면, 화면크기에 맞춰서 텍스트들을 숨기고, show more 버튼을 눌러보면, 숨어있던 텍스트들이 표시가 되게 됩니다. 사용법은 아래와 같습니다.

안녕하세요.. 오랜만에 자료를 올려보내요! 요즘 사이트를 돌아다니시다 보시면 레이어 드랍다운 메뉴들을 많이 보셧을꺼예요 일반적으로도 많이 쓰이고 있지만.. ㅋㅋ 간단하게 jquery 소스 추가로 구현이 가능해서 샘플을 하나 만들어서 업로드를 했습니다. 사용법은 아주 간단해요.. 하지만 css는 기본적으로 조금 아시고 계셔야 하실꺼예요 일단 jquery를 먼저 불어와야 합니다... 당연히 페이지 head사이에 아래의 코드를 넣어주세요 그리고 첨부된 layer.html 파일을 열어보시면 여기는 다른 소스코드는 다 생략하고 넣어두었으니.. 사용하시는분 환경에 맞게 넣어주세요 동일하게 스크립트도 head사이에 넣어줍니다. 여기서 위 jquery은 처음 출력시 cate_layer 클래스를 .hide 명령어로 기본..