민트테마 반응형 메뉴 부분 질문 드립니다.
본문
민트테마를 사용중인데, 위처럼 모바일의 해상도에서는 메뉴가 우측상단에 숨겨져있는데,
태블릿 이상의 해상도에서는 상단메뉴로 반응형으로 바뀌더라구요.
그런데, 제가 상단 고정메뉴를 따로 만들어놔서 태블릿이상으로 넘어가면 상단메뉴가 2개가 되는데, 태블릿이상에서 반응형 상단메뉴를 보이지 않게 할 수 있는 방법이 있을까요?
답변 2
아래를 해당페이지에서 불러들이는 css파일속에 넣어줍니다.
@media (min-width: 767px) {
.okmenu {display:none;}}
그리고 웹페이지에 모바일에서 나타낼 부분에
<div class="okmenu"> 들어갈 내용 </div>
을 넣어줍니다.
-------------------------
위 코드를 설명드리자면,
(min-width: 767px) 는 최저 767px 해상도 이상에서 { } 안의 코드를 사용하겠다는 것입니다.
그러니까 .okmenu {display:none;} 라는 코드를 사용하겠다는 말인데,
그것은 아래 class="okmenu" 를 화면에 나타내지 않겠다는 말입니다.
그러므로, 767px이상에서는 okmenu클래스가 들어가 있는 div코드를 나타내지 않겠다는 것이죠.
클래스명은 홈페이지에 있는 다른 클래스(class)와 겹치지 않게 자신이 원하는 클래스명으로 바꿔주시면 됩니다.
767px도 400px이하에서만 보이게 하고싶으시면 400px로 바꾸시면 됩니다.
그리고 반대로 할려면 min을 max로 바꿔주세요.
감사합니다. 해결하였습니다. ^^
쉽게 알려주셔서 잘 따라할 수 있었네요.
잘 해결하였습니다. 감사합니다. ^^
우하하하
css의 미디어 코드등을 통하여 조정 하실 수 있으시구요,
아니면 JQuery 이용해서 display width가 일정 크기 이상일 경우
hide를 하실 수 있습니다.
/* CSS Example */
@media all and (max-device-width:320px) and (max-device-height:568px){}
<script>
// jquery example
$(function(){
// 창 크기 조정 될 때
$(window).resize(function() {
if($(window).width() <= 일정크기)
{
$(".메뉴클래스").css({'display':'none'});
}
});
});
</script>
의 형태로 가능합니다.
답변, 감사합니다. ^^
생각도 못했던 제이쿼리 기능까지 알려주셔서 감사합니다.
다만, 제 능력부족으로 응용을 못해서 다른분의 방법으로 해결하게 되었네요..ㅎㅎ
