반응 형 레이아웃에서 모바일 화면을위한 다른 탐색 기능을 추가하는 방법

Question

나는 반응 형 레이아웃을 사용하여 WordPress 테마 디자인을 연구 중이다. 반응 레이아웃은 css3 media quires를 사용하여 배열됩니다. 현재이 테마 탐색은 큰 화면 크기의 경우 수평 수퍼 마차 탐색에 의존합니다. 나는 슈퍼 피쉬 나 아코디언을 사용하여 내비게이션을 수직으로 변경하고 싶습니다. 모바일 내비게이션 화면을 변경하려면 어떻게해야합니까?

Answer 1

이것은 실제로 메뉴의 출력 코드가 응답하도록 구성되는 방법에 따라 다릅니다. 그러나 여기에 도움이 될 수있는 몇 가지 아이디어가 있습니다. 때로는 모바일에서 메뉴를 모두 숨기고 다른 버전을 표시 할 수 있습니다. DOM에 항목을 숨기면 모바일 브라우저에 HTML이 출력되기 때문에로드 시간이 길어지기 때문에 까다 롭습니다. 그러나 유용성에 따라 때로는 가장 좋은 수정 방법이기도합니다. http://wpmegamenu.com/

: 여기

스크롤이

<select class="iphone-menu" ONCHANGE="location = this.options[this.selectedIndex].value;"> 
<option value="" selected="selected">Main Menu</option> 
<option value="/">Home</option> 
<option value="/portfolio">Portfolio</option> 
<option value="/services">Services</option> 
<option value="/knowledge">Knowledge</option> 
<option value="/blog">Blog</option> 
<option value="/about">About</option> 
<option value="/contact">Contact</option> 
</select> 

난 당신이 이런 식으로 뭔가를 찾고 필요하지만 원하는 무엇에 대한 생각 아이폰

같은 모바일 장치에 선택 출력하는 빠른 조각입니다 나는 보통 플러그인을 추천하지 않지만이 메뉴는 아주 잘 쓰러지고, 어떻게하면 좋을까요? 어쩌면 이것이 좋은 기준이 될 수 있습니다. 그들은 목록 항목을 특정 지점에서 100 % 너비로 만든 다음 드롭 다운 스타일을 다르게 지정합니다.

아코디언은 수행하지 않지만 드롭 다운은 수행합니다. 아코디언을 수행하려면 javascript로 창 크기 조정 스크립트를 활성화해야합니다. 그러면 모바일에서 아코디언으로 작동하고 데스크톱과 태블릿에서는 꺼지게됩니다.

function checkWidth(init) 
{ 
    /*If browser resized, check width again */ 
    if ($(window).width() < 979) { 

     // accordion script here 

    } 
    else { 
     if (init == false) { 

      // deactivate script here 

     } 
    } 
} 

// this function returns the width of the browser window 
$(document).ready(function() { 
    checkWidth(true); 

    $(window).resize(function() { 
     checkWidth(false); 
    }); 
}); 

는 희망이 올바른 방향으로 포인트 : 난 더는 JS에서 전문가가 그래서 아마 다른 사람이 더 나은 서비스를 지시 할 수 있다는 것을 의미하지만, 기본 크기 조정 기능이 같은 것으로 생각하지 않습니다. 이러한 여러 가지 방법을 사용하여 반응 형 사이트에서 다른 메뉴를 구현했으며 나에게 잘 맞았습니다.