メニュー遷移

Question

私は再構築しようとしていますが、このウェブサイトhttp://paramoredigital.com/をコピーして貼り付けてはなりません。私はメニューの遷移に問題があります。より正確には、右上のボタンをクリックするとメニューがスムーズに表示され、コード内でどのように行うのかわかりません。

ここは私のコードhttps://github.com/Szuchow/paramore-digitalです。

Answer 1

Xをクリックすると、メニューが表示されます。残りはスタイリングの問題です。

$("body").on("click", function() { 
 
    $(".menu").addClass("open"); 
 
})

body { 
 
padding: 0; 
 
} 
 

 
.container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: lightblue; 
 
} 
 

 
.menu { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    background: pink; 
 
    transition: opacity 1s ease; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.menu.open { 
 
    opacity: 1; 
 
} 
 

 
.toggle a { 
 
    font-size: 2em; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <span class="toggle"><a href="#">X</a></span> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li>Option 1</li> 
 
     <li>Option 2</li> 
 
     <li>Option 3</li> 
 
    </ul> 
 
    </div> 
 
</div>