일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- #이미지
- javascript
- #CSS
- #image
- #해피CGI
- php
- 해피CGI
- 홈페이지제작
- 게시판
- CGIMALL
- 홈페이지
- #뉴스
- 해피씨지아이
- #동영상
- jquery
- #웹솔루션
- 솔루션
- CSS
- #cgimall
- #쇼핑몰
- #솔루션
- happycgi
- #jQuery
- #업종별
- #happycgi
- 웹솔루션
- #홈페이지제작
- 사이트제작
- 쇼핑몰
- #홈페이지
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Gooey menu plugin with jQuery 본문
데모페이지를 통해서 어떤 형태의 메뉴인지는 확인이 가능합니다.
예제1)
메뉴를 접어놨을때
메뉴를 클릭해서 펼쳐놨을때
예제2)
메뉴를 가로로 펼치는 예제네요.
메뉴를 접어놨을때
메뉴를 펼쳐놨을때
예제3)
각 메뉴에 해당하는 원의 크기를 조절하는 예제
메뉴를 접어뒀을때
메뉴를 펼쳐뒀을때
가장 위의 빨간색 메뉴는 펼쳐져 있을때
각 메뉴를 구분하기가 어려운 식이었는데,
원을 약간 줄여놓으니 각각의 메뉴라는 인식이 더 쉽게 되네요.
예제4)
상하로 펼쳐지는 메뉴에 대한 예지
메뉴를 접어뒀을때
메뉴를 펼쳤을때
예제5)
메뉴를 펼치거나, 접을때 이벤트를 이용해서
효과를 다르게 주는 예제
메뉴를 접었을때
메뉴를 펼쳤을때
메뉴의 색상이 바뀌고,
선택하려는 메뉴의 색상도 같이 바뀌는 식의 효과를 줄수도 있네요.
모바일 환경에서 약간 유용하지 않으려나 하네요.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall][위지윅에디터] summernote ver.0.8.2 (0) | 2016.12.19 |
---|---|
[해피CGI][cgimall] 드래그해서 영역에 넣는 기능 Droppable (0) | 2016.12.16 |
[해피CGI][cgimall] phone number picker (0) | 2016.12.12 |
[해피CGI][cgimall] 위지윅 에서 업로드한 이미지를 슬라이드로 만들어주는 BlueImp Gallery (0) | 2016.12.09 |
[해피CGI][cgimall] A jQuery carousel plugin with swipe su (0) | 2016.12.09 |
Comments