菜单转换

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>