css로 메뉴 접기 질문입니다.
| CMS/프레임워크 | Rhymix 2.1 |
|---|---|
| 개발 언어 | PHP 8.2 |
| 문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
xedition 기본스킨으로 제작 중입니다.
모바일에서 메뉴를 클릭하면
1,2,3차 메뉴가 전부 열린 상태로 나와서(1차메뉴만 열리고 2,3차 메뉴는 접힌 상태로 노출하고 싶습니다)
며칠을 고민하다가 layout.css를 열었더니
gnb의 모바일 메뉴가
.gnb #mobile_menu_btn {
display: block;
이것만 나오더라구요.
여기서 css 코드(아코디언같은)를 추가해주면 모바일 2,3차메뉴가 접힌 상태로 출력될까요?
여러모로 공부하고는 있는데 쉽진 않네요..
xedition은 레이아웃 메뉴 설정이 layout.css 여기말고는 수정할 데가 안보이는데.. 제가 잘못 찾은 걸까요?
댓글 1
스타일시트에서 반응형 가로폭을 얼마나 자세하게 나눠놨는지는 찾아보지는 않았지만
layout.css의 1261줄을 보면 depth2에 대한 스타일이 정의되어있습니다.
그부분은 그대로 둔채 아래쪽에 .gnb > ul .depth2 에대해서 display: none를 적용해주면 2차가 안보이겠죠.
3차도 depth3를 찾아보면 됩니다.
이렇게만 하면 접힌채로 그대로 있게 되므로 무엇인가를 클릭했을때 depth2 또는 depth3의 display를 block로 바꿔줘야 합니다.
스타일을 그대로 바꿔줘도 되고, class를 추가하고 해당 class에 적용해도 되겠죠.
또한 그냥 depth2를 지정해도 안됩니다. 다른 메뉴의 것도 같이 적용될테니까요.
this를 적절히 이용하거나, 메뉴에 순번을 넣은 class를 할당해서 목적지를 지정할수도 있을 것입니다.
무엇인가를 클릭한다라는 건 많이 쓰는게 오른쪽에 화살표같은 것을 배치해서 그걸 클릭하면 동작하게 하는 것이겠죠.
css만으로는 할수 있는지는 모르겠으나
html, js, css를 적절히 사용해야 할 것입니다.