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

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

코프레스 질문글에 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 끌어다가 붙이기 귀찮아서. -.-;;

Tags: , , , ,

카테고리: ,

Ω
  • bastcode

    저저 질문이요!

    sub menu 를 hover 로 오픈 했을때… 간혹 마우스 위치가 약간 벗어나면 sub menu 가 사라지는 문제가 발생 합니다. [부모에서 자식메뉴로 이동할때]

    이 문제 해결 방법이 있다고 이전에 본것 같은데 기억이 잘 ㅜㅜ

    • http://hackya.com Matthew

      두가지 해결방법이 있습니다.

      css 로는 transition 에 delay 를 주는 방식이 있고,

      https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-delay

      js 로는 hoverIntent 를 줄 수 있습니다.

      jQuery hoverIntent 플러그인 주소:

      https://github.com/briancherne/jquery-hoverIntent

      제가 선호하는 방식은, 메뉴에 패딩 을 충분히 주어서 사용자가 실수로/의도하지 않게 마우스가 벗어나지 않도록 하는 방식입니다.

      (*아주 오래전 일이라 지금 reference 를 찾을 수는 없지만, 이 실수로 mouse out 되는 현상을 막기위해 생긴게 megamenu 라고 합니다.)

      물론 가장 최선의 방법은 드랍다운 메뉴를 사용하지 않는 것 입니다. ㅎㅎㅎ

      • bastcode

        ㅎㅎ 최선은 드랍 메뉴 사용 하지 않는것.
        호신술의 최고의 경지는 위험한 곳에 가지 않는것.
        강적을 상대로 최고의 병법은 36계 줄행랑.

        언제나 선견지명이 대단 하십니다 ㅋ

  • https://www.sobi.tips 짐농

    코프레스에서 추천해주신 플러그인 살펴봤는데 묘하게 “이거야!” 하는 느낌은 안들고,
    비슷한 다른 플러그인을 찾아봐도 마찬가지고,
    매튜님께서 적어주신 코드를 적당히(?) 적용하면 뭔가 마음에 드는 결과가 나올 듯한데…
    저한테는 이것도 어렵게 느껴지네요. (무식이 죄요~~ ㅠㅠ)

    일단 코드 저장해놓고
    해독할 수 있게 됐을 때 + 시간 날 때 야금야금 적용해 보겠습니다.
    그 때 궁금한 게 있으면 이것저것 여쭤보도록 할게요. ^^

    좋은 팁 공개해 주셔서 감사합니다~~~.

    • http://hackya.com Matthew

      예전에 냑의 리자님이 (그누보드 만드신 분) 이 대대로 길이남을 명언을 남기셨습니다.

      “코드는 그냥 뚫어지라고 쳐다보고 있으면 이해가 되기 시작한다.”

      저는 이분이 이 말씀을 농담으로 하신 줄 알았었습니다.

      오랜시간이 지난 후에야 이 말이 농담이 아니라는걸 깨닳게 되었죠.

      어떤 코드가 이해가 안되면 그냥 그 코드를 계속 쳐다보고 계세요. php 이건, js 이건, css 이건 상관없습니다.

      그 코드를 이해하고 싶은 마음만 있다면, (어떤 절박함이 있다면) 그냥 쳐다보는 것 만으로 그 코드가 이해되기 시작합니다.

      • http://www.thewordcracker.com/ Word

        진짜 명언이네요^^

        개인적인 경험으로는 잘 이해가 되지 않는 것이 있거나 풀리지 않는 문제가 있으면 당장은 해결되지 않더라도 어느 정도 시간이 지나면 (어떤 경우는 몇 달 이상)갑자기 이해가 되거나 해결 방법이 생각나는 경우가 있더군요. 어쩌면 무의식적으로 인지하고 있다가 관련 지식이 쌓이게 되면 이전에는 어렵게 느껴지거나 해결되지 않던 문제에 대한 해법(Solution)이 떠오르는 것이 아닌가 추측해봅니다.

        • bastcode

          정말 신기한 일입니다.
          저는 어떤 문제에 부딪쳤을 경우, 해결 방법을 찾기 위해서는 KEY 가 있어야 한다고 생각 하는 편입니다.

          관련도 없는 걸 찾아봐야 쓸모가 없고, 오류 나오는거 한번 보고 나서 다시 여러번 반복 해봐야 오류 일거 뻔히 압니다.

          그런데 하다보면 어느새 실마리가 풀리고 해결에 가까워 집니다.

          참 묘한 일이죠.

          그리고 내가 해결한 방법보다 더 간단하고 테크닉하게 풀어낸 사람을 보면 진심으로 감탄하고 탄복 하게 되죠.