toggleClassがナビゲーションの問題を表示しています

Question

私は終日を理解しようとしています＃menu-iconをクリックしてtoggleClassをクリックすると、@mediaクエリの "＃menu-icon .navigation" （ 'アクティブ'）、.navigationクラスを表示する（そして、このトランジションエフェクトを使って画面に私のナビゲーションを渡す）私の間違いはどこですか？

(function(){ 
 
\t 'use strict'; 
 

 
\t $(document).ready(function(){ 
 
\t \t var $toggleMenu = $('#menu-icon'); 
 
\t \t 
 
\t \t $toggleMenu.on('click', function(){ 
 
\t \t \t $('.navigation').toggleClass('active'); 
 
\t \t }); 
 
\t }); 
 

 
})();

body { 
 
    background: #000; 
 
} 
 
.navigation ul { list-style: none; margin-left: 5px; } 
 
.navigation ul li { display: inline-block; margin: 0 29px 0 0; } 
 
.navigation ul li a { display: block; padding: 6px 0 8px 0; text-decoration: none; font-size: 15px; color: #e7d9bb; } 
 
.navigation ul li a:hover { color: #a4987f; } 
 

 
/* Mobile nav icon */ 
 
#menu-icon { 
 
    width: 30px; 
 
    height: 12px; 
 
    display: none; 
 
    position: relative; 
 
    margin-top: 10px; 
 
} 
 

 
#menu-icon span, 
 
#menu-icon span:before, 
 
#menu-icon span:after { position: absolute; left: 0; height: 3px; background: #fff; width: 100%; border-radius: 2px; } 
 
#menu-icon span:before { content: ''; top: 10px; } 
 
#menu-icon span:after { content: ''; top: -10px; } 
 

 
@media (max-width: 480) { 
 
    .navigation { display: none; background: #5a9abe; position: absolute; top: 100%; width: 100%; max-width: 300px; padding: 0px 0 25px 0; opacity: 0; visibility: hidden; } 
 
    #menu-icon .navigation { transition: opacity .3s ease, visibility 0s linear .3s; } 
 
    #menu-icon .navigation { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; } 
 
    #menu-icon { display: inline-block; position: absolute; top: 50px; left: 85%; z-index: 999999; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-nav"> 
 
    <a id="menu-icon" href="#"><span></span></a> 
 
    <nav class="navigation active"> 
 
    <ul> 
 
     <li><a href="#">Home Page</a></li> 
 
     <li><a href="#">New Products</a></li> 
 
     <li><a href="#">Specials</a></li> 
 
     <li><a href="#">My Account</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
    </nav><!-- navigation --> 
 
</div><!-- main-nav -->

Answer 1

実際のHTML内activeクラスを削除し、次のようにあなたのCSSを変更します。ここでは

body { 
    background: #000; 
} 

.navigation ul { 
    list-style: none; 
    margin-left: 5px; 
} 

.navigation ul li { 
    display: inline-block; 
    margin: 0 29px 0 0; 
} 

.navigation ul li a { 
    display: block; 
    padding: 6px 0 8px 0; 
    text-decoration: none; 
    font-size: 15px; 
    color: #e7d9bb; 
} 

.navigation ul li a:hover { 
    color: #a4987f; 
} 
/* Mobile nav icon */ 

#menu-icon { 
    width: 30px; 
    height: 12px; 
    display: none; 
    position: relative; 
    margin-top: 10px; 
    z-index: 10; 
} 

#menu-icon span, 
#menu-icon span:before, 
#menu-icon span:after { 
    position: absolute; 
    left: 0; 
    height: 3px; 
    background: white; 
    color: white; 
    width: 100%; 
    border-radius: 2px; 
    z-index: 100; 
} 

#menu-icon span:before { 
    content: ''; 
    top: 10px; 
} 

#menu-icon span:after { 
    content: ''; 
    top: -10px; 
} 

@media (max-width: 480px) { 

.active { //need to add some sort of logic for active 
     display: inline-block; 
     opacity: 1 !important; 
     color: white; 
     top: 0% !important; //on active, navigation is in the screen 
     transition-duration: 0.5s; 
} 

.navigation { 
    background: #5a9abe; 
    position: absolute; 
    top: -100%; //navigation is originally hidden above the screen 
    width: 100%; 
    max-width: 300px; 
    padding: 0px 0 25px 0; 
    opacity: 0; 
    transition-duration: 0.5s; //make sure the transition duration is only in the media query 
} 

.navigation ul li { 
    width: 100%; 
} 

#menu-icon { 
    display: inline-block; 
    position: absolute; 
    top: 50px; 
    left: 85%; 
    z-index: 999999; 
} 

} 

はフィドルです：https://jsfiddle.net/auaLqccv/

私はしませんでした実際に行って何か他のものを修正する。私は機能が最初にあることを望んでいました。それがどのようにフィットするかをスタイルします。