css 드랍다운 메뉴 모바일에서도 사용가능하게 만들기

[ 이글은 2017년 04월 09일에 최종 수정되었습니다. ]
§

코프레스 질문글에 css 로 만든 드랍다운 메뉴를 모바일에서 작동하게 만들기 위해 <button> 태그를 집어넣는 방법을 물어보시는 분이 계셨는데 (사실 버튼말고 css toggle 핵 으로도 가능한 기법입니다.) 간단한 예제를 잠깐 짜보았습니다.

모바일뷰에서 버튼이나 css toggle 핵을 사용하게 되는 이유는, 모바일에서는 css 의 pseudo element 중 하나인 hover state 를 작동시킬 방법이 없기 때문입니다.

그런데 질문자분 처럼 버튼 태그를 넣으려면 워드프레스가 출력해주는 메뉴관련 html 코드 를 walker class 로 지정해줘야 하는데, 짐농님이 지적하신데로 이게 초보자가 손대기 힘듭니다. 사실 저도 walker class 는 쓰기 싫습니다. 코드가 너무 복잡해지니까. =..= (네, 저 php알못 이라는.ㅋㅋㅋ)

예전에 저처럼 php 손대기 싫은 front-end 개발자들은 3단메뉴도 그냥 css 만으로 짜곤 했는데, (이런식으로) 이게 모바일 기기들이 출현하면서 모바일뷰에서는 먹통이 되어버리는 문제가 출현 했습니다.

그래서 저는 예전에 2단이상의 드랍다운메뉴를 구축해야 하면 javascript 의 touch events API 를 활용했었습니다. 한국은 미국과 달리 아직도 복잡한 드랍다운 메뉴를 사용하게 되는 경우가 많아, 한국에서 유용하게 사용하실 개발자 분이 계실지도 모르겠습니다.

‘touch events 는 onclick/ click event 로 해도 되잖아?’ – 라고 생각하시는 분도 계실텐데, 질문자 분은 벌써 css hover 메뉴를 만드셨잖아요. ㅎㅎㅎ 그러니까 모바일 뷰에서만 작동하는 touch events 를 써야죠.

예제 : PC 에서는 hover 메뉴, 모바일에서는 touch/click 메뉴

소스 : 우클릭해서 저장하시면 됩니다
https://hackya.com/tutorial/touch_events.html

사실 이런 드랍다운메뉴는 UI 관점에서 좋지 않기 때문에 요즘 UX 트렌드는 이런 드랍다운 메뉴를 최대한 기피합니다.
https://hackya.com/kr/메뉴-와-ui-그리고-seo/

그런데 그딴게 어디있슴? 그냥 클라가 하라면 하는거죠. ㅋㅋㅋ

* touch events detection 은 물론 modernizr 로 하셔도 되고 하시는게 더 좋습니다.

modernizr 끌어다 붙이시고, if 모바일이면 적용. 이런식으로요.

if (Modernizr.touch) { }

왜 그렇게 하지 않았냐구요? modernizr 끌어다가 붙이기 귀찮아서. -.-;;

Ω