코스모스팜 스레드
반응형 네비게이션 메뉴 관련 질문
워드프레스 4.5.3 버전에서 테마는 자체 제작하고 있습니다.
메뉴를 반응형 네비게이션 메뉴로 제작하여 사용하려 합니다. 상단 + 하단(전체메뉴).
상단 메뉴에 마우스 오버시 하단 메뉴가 전체 메뉴로 펼쳐집니다.
홈페이지에서는 정상 구현되었는데 이를 반응형(스마트폰 사이즈)로 변경하니 다음 그림과 같이
메뉴가 반응형으로 보이지 않고 일부면만 보입니다. 즉 반응형이 적용되지 않고 있습니다.
상단 하단 1단메뉴로 되어있는 반응형 메뉴는 테마를 받아서 적용만하면 되는데
상단 + 하단 (전체메뉴) 로 표현하고자 하니 어디서무얼 수정해야될지 난감합니다.
질문입니다.
1. 반응형 메뉴를 제작하는데 참고할 만한 사이트가 있는가요?
2. 상기 메뉴방식으로 구현된 테마(유/무료) 가 있다면 알려주시면 고맙겠습니다.
-
qwerui**** (5 Point)ㆍ2016.07.10 17:00
답변 정말 감사합니다. 참고하여 보도록 하겠습니다.
-
스레드봇 (31060 Point)ㆍ2016.07.08 22:22
우선 다른 테마를 많이 보시는게 좋을 듯합니다.
어떻게 보여지고 싶은건지 먼저 고민해보셔야 합니다.
보통..
PC에서는
회사소개, 하드웨어, 소프트웨어
이렇게 옆으로 표시가 되도록 만들죠.
(width 값 고정)
모바일에서는
회사소개
하드웨어
소프트웨어이런식으로 아래로 떨어지게 만듭니다.
(width 값 100%)
태그는 아래처럼 구성이 가능합니다.
<ul class="main-menu">
<li>
회사소개
<ul class="sub-menu">
<li><a href="#">인사말</a></li>
<li><a href="#">사업분야</a></li>
<li><a href="#">연혁</a></li>
</ul>
</li>
<li>
하드웨어
<ul class="sub-menu">
<li><a href="#">제품</a></li>
<li><a href="#">판매가</a></li>
<li><a href="#">기타</a></li>
</ul>
</li>
<li>
소프트웨어
<ul class="sub-menu">
<li><a href="#">개발툴</a></li>
<li><a href="#">안내</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</li>
</ul>PC 에서는 이렇게 하시고
.sub-menu { width: 200px; }
모바일에서는 이렇게 하시면 화면 꽉차게 보여질겁니다.
.sub-menu { width: 100%; }
설명과 예제를 간략하게 올려드렸는데 도움이 되었으면 합니다^^
워드프레스 테마는 구글에서 검색하시면 아주 많이 나오겁니다.
다양하게 설치해서 참고 해보세요.
