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

[해피CGI][cgimall] Gooey menu plugin with jQuery 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] Gooey menu plugin with jQuery

해피CGI윤실장 2016. 12. 15. 09:19

데모페이지를 통해서 어떤 형태의 메뉴인지는 확인이 가능합니다.


예제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
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments