브라우저의 너비가 줄어들면 즉시 내비게이션을 숨기기

Question

브라우저 크기가 응답 가능으로 줄어들면 탐색을 즉시 숨기려고합니다. nav 쿼리를 사용하여 nav 레이아웃을 제어하고 있습니다. 필자가 작성한 코드는 작동하지만 브라우저 너비를 줄이면 내비게이션을 한눈에 볼 수있게되고 메뉴 단추를 클릭하기 만하면 바로 숨기는 대신 왼쪽으로 슬라이드합니다.

codepen 참조하십시오 http://codepen.io/rezasan/pen/wWNxjR

HTML

<header> 
    <div id="menu-toggle">MENU</div> 
    <div class="header-bottom"> 
    <nav class="clearfix" id="topMenu"> 
     <div class="nav-group"> 
     <ul class="main-nav"> 
      <li><a href="about.html">About</a></li> 
      <li><a href="expertise.html">Expertise</a></li> 
      <li><a href="projects.html">Projects</a></li> 
      <li><a href="process.html">Process</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
     </div> 
    </nav> 
    </header> 

CSS

@media only screen and (max-width: 65em){ 

#menu-toggle{ 
     width: 35px; 
     height: 50px; 
     position: absolute; 
     top:0; 
     cursor: pointer; 
     left:0; 
     color:red; 
    } 

.header-bottom{ 
     transform:translateX(-100%); 
     -webkit-transform:translateX(-100%); 
     -moz-transform:translateX(-100%); 
     -o-transform:translateX(-100%); 
     -ms-transform:translateX(-100%); 
     top:0; 
     height: 100%; 
     left: 0; 
     width: 100%; 
     background-color: #000; 
     z-index: 1; 
     transition:transform 0.5s cubic-bezier(.91,.12,.46,.8); 
     -webkit-transition:-webkit-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
     -moz-transition:-moz-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
     -ms-transition:-ms-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
     -o-transition:-o-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
    } 

    .slide{ 
     transform:translateX(-0%); 
     -webkit-transform:translateX(-0%); 
     -moz-transform:translateX(-0%); 
     -o-transform:translateX(-0%); 
    } 

} 

JS

$('#menu-toggle').click(function(){ 
     $('.header-bottom').toggleClass('slide'); 
}); 

Answer 1

다음과 같은 CSS를 변경하기 만하면됩니다 :

.header-bottom{ 
    transform:translateX(-101%); 
     -webkit-transform:translateX(-101%); 
     -moz-transform:translateX(-101%); 
     -o-transform:translateX(-101%); 
     -ms-transform:translateX(-101%); 
} 

CodePen에서 시험해 볼 수 있습니다.

Answer 2

그래서 알아 냈습니다. 표시해야합니다 : 먼저 nav을 숨기려면 없음

.header-bottom{ 
    transform:translateX(-100%); 
    -webkit-transform:translateX(-100%); 
    -moz-transform:translateX(-100%); 
    -o-transform:translateX(-100%); 
    -ms-transform:translateX(-100%); 
    top:0; 
    height: 100%; 
    left: 0; 
    width: 100%; 
    background-color: #000; 
    z-index: 1; 
    transition:transform 0.5s cubic-bezier(.91,.12,.46,.8); 
    -webkit-transition:-webkit-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
    -moz-transition:-moz-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
    -ms-transition:-ms-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
    -o-transition:-o-transform 0.5s cubic-bezier(.91,.12,.46,.8); 
    display:none; 
} 

JS에서는 fadeToggle 및 toggleClass가 필요합니다.

$('#menu-toggle').click(function(){ 
    $('.header-bottom').fadeToggle().toggleClass('slide'); 
});