반응 형 디자인을위한 메뉴에서 CSS가 작동하지 않습니다.

Question

반응 형 웹용으로 꽤 거친 메뉴를 만들었습니다. 하지만 iPad 나 휴대 전화와 같은 기기에서 열면 해결할 수없는 작은 버그가 발견되었습니다. 나는 그것을 위해 jQuery를 사용했다. 내가 뭘 하려는지는 장치에서 메뉴가 열렸을 때 옵션을 클릭하자마자 곧 닫혀 야합니다. 그러나 나는 이것을 성취 할 수 없었다. 메뉴 옵션을 다시 클릭 할 때까지 내 메뉴가 닫히지 않습니다.

HTML

<div class="container"> 
    <div class="header clearfix"> 
     <div class="nav"> 
      <input type="checkbox" id="toggle" /> 
      <label for="toggle" class="toggle" onclick></label> 
      <ul class="menu"> 
       <li><a href="#">Google</a> 
       </li> 
       <li><a href="#">Facebook</a> 
       </li> 
       <li><a href="#">Youtube</a> 
       </li> 
       <li><a href="#">Twitter</a> 
       </li> 
       <li><a href="#">Facebook</a> 
       </li> 
       <li><a href="#">Youtube</a> 
       </li> 
       <li><a href="#">Twitter</a> 
       </li> 
      </ul> 
     </div> 
     <!-- End of Navigation --> 
    </div> 
    <!-- End of Header --> 
</div> 

CSS

html, body { 
    height: 100%; 
    background: #F2F2F2; 
} 
body, a { 
    font: normal 16px Helvetica, Verdana, Geneva, sans-serif; 
    color: #3F3F3F; 
} 
.container { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -30px; 
} 
.container:after { 
    content:''; 
    display: block; 
    height: 30px; 
    clear: both; 
} 
body { 
    -webkit-animation: bugfix infinite 1s; 
} 
@-webkit-keyframes bugfix { 
    from { 
     padding:0; 
    } 
    to { 
     padding:0; 
    } 
} 
.header { 
    position: relative; 
} 
#toggle, .toggle { 
    display: none; 
} 
.menu > li { 
    list-style: none; 
    float:left; 
} 
.clearfix:before, .clearfix:after { 
    display: table; 
    content:""; 
} 
.clearfix:after { 
    clear: both; 
} 
@media only screen and (max-width: 768px) { 
    .menu { 
     display: none; 
     opacity: 0; 
     width: 100%; 
     position: absolute; 
     right: 0; 
    } 
    .menu > li { 
     display: block; 
     width: 100%; 
     margin: 0; 
    } 
    .menu > li > a { 
     display: block; 
     width: 100%; 
     text-decoration: none; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 
    .toggle { 
     display: block; 
     position: relative; 
     cursor: pointer; 
     -webkit-touch-callout: none; 
     -webkit-user-select: none; 
     user-select: none; 
    } 
    #toggle:checked ~ .menu { 
     display: block; 
     opacity: 1; 
    } 
} 
/*-------------------------------- 
Presentation Styles (Editable) 
---------------------------------*/ 
.header { 
    min-height: 100px; 
    height: 100%; 
    padding: 0 20px; 
    background: #FFFFFF; 
} 
.header > h1 { 
    float: left; 
    padding: 30px 0 0; 
    font-style: italic; 
    font-family: Georgia; 
    font-size: 28px; 
    color: #DFDFDF; 
} 
.nav { 
    display: block; 
    float: right; 
} 
.nav, .menu, .menu > li, .menu > li > a { 
    height: 100%; 
} 
.menu > li > a { 
    display: block; 
    padding: 42px 20px; 
    text-decoration: none; 
    font-weight: normal; 
    font-size: 16px; 
    line-height: 1; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.25s linear; 
    -moz-transition: all 0.25s linear; 
    -o-transition: all 0.25s linear; 
    transition: all 0.25s linear; 
} 
.menu > li > a:hover, .menu > li > a:focus { 
    background: #F2F2F2; 
    box-shadow: inset 0px 5px #51C1F1; 
    color: #51C1F1; 
    padding: 50px 20px 34px; 
} 
.toggle { 
    z-index: 2; 
} 
@media only screen and (max-width: 768px) { 
    .menu { 
     background: #FFFFFF; 
     border-top: 1px solid #51C1F1; 
    } 
    .menu, .menu > li, .menu > li > a { 
     height: auto; 
    } 
    .menu > li > a { 
     padding: 15px 15px; 
    } 
    .menu > li > a:hover, .menu > li > a:focus { 
     background: #F2F2F2; 
     box-shadow: inset 5px 0px #51C1F1; 
     padding: 15px 15px 15px 25px; 
    } 
    .toggle:after { 
     content:'Main Menu'; 
     display: block; 
     width: 200px; 
     margin: 33px 0; 
     padding: 10px 50px; 
     background: #51C1F1; 
     -webkit-border-radius: 2px; 
     border-radius: 2px; 
     text-align: center; 
     font-size: 12px; 
     color: #FFFFFF; 
     -webkit-transition: all 0.5s linear; 
     -moz-transition: all 0.5s linear; 
     -o-transition: all 0.5s linear; 
     transition: all 0.5s linear; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 
    .toggle:hover:after { 
     background: #45ABD6; 
    } 
    #toggle:checked + .toggle:after { 
     content:'Close Menu'; 
    } 
} 
@media only screen and (max-width: 479px) { 
    .header > h1 { 
     text-align: center; 
    } 
    .header > h1, .nav, .toggle:after { 
     float: none; 
    } 
    .toggle:after { 
     text-align: center; 
     width: 100%; 
    } 
} 

여기

가

또한 브라우저의 크기를 조정하여 확인할 수 있습니다 .. FIDDLE

제발 도와주세요, JQuery와 같은

Answer 1

위해 작동하는이 demo

$('.menu').click(function(){ 
    $('#toggle').click(); 
}) 

Answer 2

당신은 당신이 원하는 것을 할 script을 추가 할 수 있습니다보십시오.

http://jsfiddle.net/H8VCb/3/

Answer 3

데모에 대한

$('.menu li').on("click",function(){ 
    $('#toggle').trigger("click"); 
}); 

는 다음 jQuery를 추가합니다.

$('label.toggle').click(function(){  
setTimeout(function(){ 
    if($('ul.menu').css("display") == "block") 
     $('#toggle').trigger("click");   
}, 5000); //you can mentioned your seconds here. 1000 = 1 sec. 
}); 

위의 기능은 메뉴를 5 초 표시합니다. 그 후에 메뉴가 숨겨집니다.

FIDDLE DEMO