일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- 해피씨지아이
- CGIMALL
- #홈페이지제작
- #CSS
- #해피CGI
- #뉴스
- #cgimall
- 솔루션
- #image
- php
- 홈페이지제작
- jquery
- 웹솔루션
- #이미지
- #홈페이지
- #업종별
- #동영상
- #솔루션
- #happycgi
- 해피CGI
- 쇼핑몰
- 게시판
- 사이트제작
- #쇼핑몰
- javascript
- #웹솔루션
- CSS
- 홈페이지
- happycgi
- #jQuery
- Today
- Total
목록toggle (4)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
닫혀있는 상태 열려있는 상태 체크박스 버튼 닫혀있는 상태의 버튼 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 명령어로 기본..