ブラウザの幅が縮小されたときに、すぐにブラウザを非表示にする

Question

ブラウザのサイズを[応答]に変更したときにすぐにナビゲーションを非表示にしたいとします。私は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

私はそれを理解しました。私は表示する必要があります：最初にナビを隠すためにはなし

.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'); 
});