메뉴 반응 (menutron.js) + 탭 JQuery와

Question

가 나는 다음과 같은 탭 메뉴 간단한 JQuery와 스크립트를 기반으로 한,하지만 난 플러그인 menutron.js와 반응 버전을 구현하고자하는

내가 실행할 수있는 방법을 어떤 생각 반응 형 버전의 선택? 정상

$(".tabs-menu a").click(function (event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
    }); 

    $("#sidebar").menutron({ 
     maxScreenWidth: 400, 
     menuTitle: 'Menu Responsive' 
    }); 

버전 : 반응

버전 :

예 :http://jsfiddle.net/y0vLoasm/3/

Answer 1

다음은 문제에 대한 빠른 해결책입니다. 수동으로 select 요소를 만들고 실제 링크에 변경 내용을 위임합니다. 따라서 어떤 코드라도 select 탐색을 사용할 때 실행됩니다.

나는 시작시 select 요소를 작성/표시하는 미디어 쿼리를 사용는 브라우저를 기반으로

CSS

#sidebar > .tabs-menu{display:block} 
#sidebar > select{display:none;} 

@media (max-width:400px){ 
    #sidebar > .tabs-menu{display:none} 
    #sidebar > select{display:block} 
} 

자바 스크립트

var select = $('<select><option>Menu Cierra Puertas</option></select>'), 
    tabLinks = $(".tabs-menu a").click(function (event) { 
    event.preventDefault(); 

    var self = $(this), 
     parent = self.parent(), 
     tab = self.attr('href'), 
     index = tabLinks.index(this); 

    parent.addClass("current") 
      .siblings().removeClass("current"); 

    $(".tab-content").not(tab).css("display", "none"); 
    $(tab).fadeIn(); 

    // highlight the option in the select so it matches current one 
    select[0].options[index+1].selected = true; 
}); 

// create the select options 
tabLinks.each(function(idx, item){ 
    $('<option>',{ 
     text: $(this).text() 
    }).appendTo(select); 
}); 
// handle navigation from the select element 
select.appendTo('#sidebar') 
     .on('change', function(){ 
      var index = this.selectedIndex-1; 
      if (index >= 0){ 
       tabLinks.eq(index).trigger('click'); 
      } 
     }); 

데모 폭 숨기기 http://jsfiddle.net/gaby/v95r32ym/