Flex 레이아웃을 안써보셨다면 스크린샷만 보고 뭐한건데? 라고 생각하시겠네요.
기본적으로 모바일에서 사용하는 저 메뉴의 펼침/접기 아이콘이 1개로 제공 됩니다. 그동안 조금 거슬렸던 부분인데 오늘 짬내서 시도해 보고 고쳐봤습니다.
아이콘만 보면 누르면 펼쳐질 건지 아니면 접히는건지 알 수 있게 되어 빠르게 메뉴 상태를 확인할 수 있게 되었네요.
-
?
약간 다른 내용 같습니다. 펼치던 접던 아이콘 ^ 하나로 사용하던 걸 두개로 분리한거에요.
원래부터 클릭한 메뉴만 펼쳐지고 접히고 했어요.
아이콘이 하나라 햇깔리고 조금 그랬던 거죠.
-
?
아~펼침, 접힘 상태에 따라 아이콘 모양이 달라지는 거 였군요 ㅎㅎ 근데 모바일 뷰가 진짜 깔끔하고 이쁘네요
-
?
네. 모바일이 너무 예뻐서 바꾸게 되었죠. 그동안 사용했던 건 심플월드 레이아웃 이었습니다.
-
오? 라이믹스 아이콘은 직접 만드신 건가요? -
아니에요 ㅋ 저 레이아웃에서 기본으로 사용하도록 코딩된 ionicons 에 있는 거에요.
<ion-icon name="logo-xing"></ion-icon>
xing 이라는 서비스나 회사가 있나봅니다. -
그렇군요. 지금보니 폰트 어썸에도 존재하네요!
https://fontawesome.com/icons?d=gallery&q=xing -
헐 ㅋㅋㅋ 비슷하면서도 다르네요. -
펼칩 아이콘이 한 방향만 보고 있던걸 펼칠 때 돌아가도록 만드셨다는거군요. -
네. 아이콘 추가해서 두개로 토글되게 했습니다. 방향 맞춰서요.
-
Snax님 flex 업데이트 버전 잘 쓰고 있습니다.
웹지기님 꿀팁 보고 저도 하드코딩 하려다가 업데이트 버전이 나와서 쉽게 적용했습니다.
컨테이너를 3단으로 나눠서 적용해보고 있는데
아직 메인 메뉴를 숨기고 사이드로 빼지는 못했지만요.
왼쪽 사이드에 메인 메뉴 출력하는 팁 좀 주십시오 -
웹지기님은 직접 만드셔서 넣으셨습니다. 다른 레이아웃 코드랑 합치신거 같습니다. 플렉스 레이아웃은 사이드라는 것 자체가 없습니다.
-
/flex/components/header/header-menu/header-menu.html
안에 메뉴 출력 부분만 복사해서 PC쪽에만 노출되게 조건을 걸어서 사이드에 넣은 겁니다.상단에 노출되는 메뉴 불러오는 코드는 주석처리 했습니다.
<!--include target="header-nav.html" /-->
-
네 감사합니다.
열심히 만들어 보겠습니다. -
팁 감사합니다.
꿀팁를 보고 새롭게 변하면 따라서 바꿔 보면서 열공하고 있습니다.
감사합니다. -
메뉴 펼침/접기 아이콘 2개로 제공하면서 펼치고 접히는 부분에 동작하시는 시간 추가해서 약간 겉멋 추가했습니다. ㅋ
-
오~~~ 이해했습니다.
펼침 아이콘 하나로 모든 메뉴가 펼쳐졌던 걸 상위메뉴누르면 그 하위메뉴만 펼쳐지게 하신거군요!