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

[해피CGI][cgimall] Smart Sticky Header Hamburger Navigation Plugin - jQuery mhead 본문

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

[해피CGI][cgimall] Smart Sticky Header Hamburger Navigation Plugin - jQuery mhead

해피CGI윤실장 2021. 7. 2. 09:32

모바일용 웹페이지를 제작할 때
상단 부분에 세줄(햄버거)이 화면을 스크롤(스와이프) 할때
숨기거나, 표시해주는 jQuery 플러그인입니다.

 



스크롤을 내려보면 상단에 세줄 모양의 바가 화면 스크롤을 따라서 내려오거나,
스크롤을 빠르게 내리는 경우 상단의 바가 화면에서 사라집니다.

 


햄거버 모양의 아이콘 외에 로고, 그 외의 아이콘 들이 추가된 예제입니다.

 



햄버거바를 클릭하면 메뉴 화면이 열리면서
햄버거 모양의 아이콘이 닫기를 의미하는 아이콘으로 변경시 에니메이션을 주는 예제입니다.


그 외에도 햄버거 바의 위치를 좌에서 우로 조절을 한다거나,
로고를 포함한다거나,
아래 그림 처럼 검색폼이 포함된 예제가 있습니다.

 

 

 

 

홈페이지바로가기

Comments