부트 스트랩 클래스 목록 그룹을 사용하는 모바일 대응 접이식 메뉴

Question

나는 내 웹 사이트에 대해 매우 간단하고 빠른 로딩, 읽기 쉽고 반응이 빠른 디자인을 만들고 있습니다. 왼쪽 탐색을 위해 부트 스트랩의 목록 그룹 클래스를 사용하고 있으며 모바일/소형 장치에서 접을 수있는 방법을 찾을 수 없었습니다. 또한, 화면을 너무 많이 줄이면 최상위 탐색이 사라집니다. 방금 디자인을 고쳐야하고 다시 시작해야할까요? 저는 모바일 호환성의 부족을 제외하고는 일반적으로 만족합니다.

http://www.taniarascia.com/acordeondeteclas

이 도움이 같은 것을 사용하려고 내 처음이다, 어떤 의견을 주시면 감사하겠습니다.

<div class="list-group"> 
<a href="intro.html" class="list-group-item">The Basics</a> 

왼손잡이 탐색 방식입니다.

Answer 1

메뉴 :

<div id="sidebar" class="list-group"> 
    <a class="list-group-item collapse-toggle head1">Learn Piano Accordion</a> 
    <div id="menu" class="hidden-tablet collapse"> 
     <a class="list-group-item" href="intro.html">The Basics</a> 
     <a class="list-group-item" href="types.html">Types of Accordions</a> 
     <a class="list-group-item" href="musictheory.html">Music Theory</a> 
     <a class="list-group-item" href="scales.html">Scales, Thirds and Sixths</a> 
     <a class="list-group-item" href="chords.html">Major, Minor and 7th Chords</a> 
     <a class="list-group-item" href="keys.html">Keys and Chord Progressions</a> 
     <a class="list-group-item" href="tutorials.html">Tutorials</a> 
     <a class="list-group-item" href="adornos.html">Adornos</a> 
     <a class="list-group-item" href="basses.html">Basses</a> 
     <a class="list-group-item" href="bands.html">Bands with Piano Accordion</a> 
     <a class="list-group-item" href="misc.html">Miscellaneous</a> 
    </div> 
</div> 

JS

$('.collapse-toggle').on('click', function(){ 
    $('#menu').collapse('toggle'); 
}); 

Fiddle

UPDATE : 실제를 확인하기 위해 당신이 jQuery를 기능을 추가 할 수있는 모바일 장치를 사용할 때 메뉴를 숨기려면 화면 크기와 X보다 낮은 경우 (이 경우 480)의 작업을 수행합니다.

JS는 :

$(window).on('resize', function(){ 
    var windowSize = $(window).width(); 
    if(windowSize < 480) { 
     $('#menu').collapse('hide'); 
    } else { 
     $('#menu').collapse('show'); 
    } 
}); 

Fiddle Updated