메뉴1.jpg

메뉴2.jpg

 

 

 

스크린샷(124).png

스크린샷(125).png

 

 

Flex 레이아웃을 안써보셨다면 스크린샷만 보고 뭐한건데? 라고 생각하시겠네요.

 

 

 

기본적으로 모바일에서 사용하는 저 메뉴의 펼침/접기 아이콘이 1개로 제공 됩니다. 그동안 조금 거슬렸던 부분인데 오늘 짬내서 시도해 보고 고쳐봤습니다.

 

 

아이콘만 보면 누르면 펼쳐질 건지 아니면 접히는건지 알 수 있게 되어 빠르게 메뉴 상태를 확인할 수 있게 되었네요. 

글쓴이 웹지기

profile
XE와 라이믹스를 운영하며 알게된 노하우를 공유합니다.
https://rxtip.kr/ 라이믹스 꿀팁
  • ?

    펼침 아이콘 하나로 모든 메뉴가 펼쳐졌던 걸 상위메뉴누르면 그 하위메뉴만 펼쳐지게 하신거군요!

  • ? profile

    약간 다른 내용 같습니다. 펼치던 접던 아이콘 ^ 하나로 사용하던 걸 두개로 분리한거에요.

    원래부터 클릭한 메뉴만 펼쳐지고 접히고 했어요. 

     

    아이콘이 하나라 햇깔리고 조금 그랬던 거죠.

  • profile ?

    아~펼침, 접힘 상태에 따라 아이콘 모양이 달라지는 거 였군요 ㅎㅎ 근데 모바일 뷰가 진짜 깔끔하고 이쁘네요

  • ? profile
    네. 모바일이 너무 예뻐서 바꾸게 되었죠. 그동안 사용했던 건 심플월드 레이아웃 이었습니다.
  • profile
    오? 라이믹스 아이콘은 직접 만드신 건가요?
  • profile profile
    아니에요 ㅋ 저 레이아웃에서 기본으로 사용하도록 코딩된 ionicons 에 있는 거에요.
    <ion-icon name="logo-xing"></ion-icon>
    xing 이라는 서비스나 회사가 있나봅니다.
  • profile profile
    그렇군요. 지금보니 폰트 어썸에도 존재하네요!
    https://fontawesome.com/icons?d=gallery&q=xing
  • profile profile
    헐 ㅋㅋㅋ 비슷하면서도 다르네요.
  • profile
    펼칩 아이콘이 한 방향만 보고 있던걸 펼칠 때 돌아가도록 만드셨다는거군요.
  • profile profile
    네. 아이콘 추가해서 두개로 토글되게 했습니다. 방향 맞춰서요.
  • profile profile
    Snax님 flex 업데이트 버전 잘 쓰고 있습니다.
    웹지기님 꿀팁 보고 저도 하드코딩 하려다가 업데이트 버전이 나와서 쉽게 적용했습니다.
    컨테이너를 3단으로 나눠서 적용해보고 있는데
    아직 메인 메뉴를 숨기고 사이드로 빼지는 못했지만요.
    왼쪽 사이드에 메인 메뉴 출력하는 팁 좀 주십시오
  • profile profile
    웹지기님은 직접 만드셔서 넣으셨습니다. 다른 레이아웃 코드랑 합치신거 같습니다. 플렉스 레이아웃은 사이드라는 것 자체가 없습니다.
  • profile profile

    /flex/components/header/header-menu/header-menu.html

    안에 메뉴 출력 부분만 복사해서 PC쪽에만 노출되게 조건을 걸어서 사이드에 넣은 겁니다.

    상단에 노출되는 메뉴 불러오는 코드는 주석처리 했습니다.

    <!--include target="header-nav.html" /-->

  • profile profile
    네 감사합니다.
    열심히 만들어 보겠습니다.
  • profile profile
    팁 감사합니다.
    꿀팁를 보고 새롭게 변하면 따라서 바꿔 보면서 열공하고 있습니다.
    감사합니다.
  • profile profile

    메뉴 펼침/접기 아이콘 2개로 제공하면서 펼치고 접히는 부분에 동작하시는 시간 추가해서 약간 겉멋 추가했습니다. ㅋ

  • profile
    오~~~ 이해했습니다.