반응형 HTML5 슬라이드 MENU 오픈소스

이게 얼마나 쉽냐면

이것저것 HTML5 SLIDE 메뉴랍시며 적용해보다 매번 헛걸음만 하다 이 오픈 소스 한방에 모든게 다 해결되었기 때문이다.

왼쪽에서 오른쪽 또는 그 반대방향 푸시메뉴도 되고 레이어처럼 메뉴가 위로 올라오기도 할 수 있고, 아래에서 위에서 아래로도 되는 매우 강력한 HTML5 SLIDE MENU라 할 수 있겠다.

 

원본 출처는 다음과 같다.

https://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

 

데모는 여기서 확인이 가능하다.

https://tympanus.net/Blueprints/SlidePushMenus/

 

다만 한가지 마음에 안드는건 메뉴가 그냥 쌩 버튼이라 좀 손봐야 한다란 부분이다.

또 어려운 중생들을 위해 수정된 HTML을 공유하니 있는 힘껏 경배하라

음하하하하

<div id="showLeftPush" style="position:absolute; z-index:100; padding:24px 0 0 20px;"><img src="../images/slideMenu.png" /></div>

흔히 사용되는 三 아이콘이 slideMenu.png라 보면 되고 이 위치가 버튼의 좌측에 배치된다 보면 된다.

 

버튼을 100%로 만드는건 알아서 -_-

 

제가 나중에 볼려고 퍼온 글 입니다..

 

출처: https://hippalus.tistory.com/376 [히파루스의 솔직한 여행 이야기]

최고로 쉬운 반응형 HTML5 SLIDE MENU 오픈소스