그동안 반응형에서 고민되었던 모바일메뉴처리 방식을 정하게 되었다.

그동안 반응형 사이트를 개발하면서, 모바일용 메뉴와 PC,태블릿용 메뉴를 1개의 소스로 변형 시키느라 너무 고생이 많았다.

오늘까지 좀더 나은 해결책이 없을까 하다가, 반응형이지만, PC용과 모바일용 메뉴를 분리 하기로 정하고, CSS를 적용해 보았다.

PC용은 메뉴는 문제가 없었으나, 모바일용 메뉴와 공통소스로 변경시키려니 너무 어려웠다.

모바일용 메뉴는 GNU소스를 이용해서 사용하였다. 이렇게 작업하니, 너무 편하다. 앞으로는 이런방식을 작업해야 겠다.

jQuery mmenu v4.5.7 메뉴사용 참조: https://sir.kr/g5_plugin/471

모바일용 적용 (아래)

태블릿용 메뉴적용 (아래)

PC용 메뉴적용 (아래)

작업하면서, 기존 jquery.mmenu.all.js 소스를 수정할 부분이 생겨서 수정하였다. 마침 자바스크립트소스가 압축이 되어 있어서

압축을 풀고 작업하였다. ( 온라인으로 압축된 Js소스 풀기URL: http://jsbeautifier.org/ )

( 온라인으로 압축된 Css소스 풀기URL: https://unminify.com/ )

수정한 부분은 아래에 o.close() 함수 다음에 버튼 토글 이미지를 변경시키는 코드를 추가해 보았다.

o.close(), setTimeout(function() {$(".menu-toggle-btn img").attr("src", $(".menu-toggle-btn img").attr("src").replace("close", "open"))}, 450)