jsオーバーレイを閉じた後、ページコンテンツが非表示になります

Question

最初はすべてのページコンテンツが表示されます。 「私たちについて」と呼ばれるボタン（フッタ内の）をクリックすると、オーバーレイがページをカバーして情報を表示します。私が読んで、右隅の「X」を押すと、オーバーレイが閉じられますが、私は自分のコンテンツがないままウェブページを残しています。 「私たちについて」ボタンをクリックする前にそこにあったのと同じ内容が隠されています。

これはなぜですか？

マイHTML：

<footer> 
<a id="footer_" href="#" onclick="openNav()">&#9776; Over ons </a> 
</footer> 

マイJS：

function openNav() { 
    document.getElementById("myNav").style.height = "100%"; 
} 

function closeNav() { 
    document.getElementById("myNav").style.height = "0%"; 
} 

マイCSS：

.overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-y: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

@media screen and (max-height: 450px) { 
    .overlay {overflow-y: auto;} 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
} 

ページのデフォルトの内容：

HTML：

<div id="content" > 

      <!-- Intro --> 
      <article id="menu_a"> 
       <h2>Introduction</h2> 
       <figure> 
        <img src="http://placehold.it/150x150" alt="Intro image"/> 
       </figure> 
       <p> 
       some text here bla bla bla.... 
       </p> 
      </article> 

</div> 

がJSFIDDLE：https://jsfiddle.net/t60623gj/

Answer 1

を私は、仕事のためのjQueryを使用することをお勧めし、それははるかに容易になるだろう。あなたのNAVは、正確に何をしたいのかに応じて、

$(document).ready(function() { 
    $('#footer').click(function() { 
    $('#myNav').slideUp(); 
}); 
    $('.closebtn').click(function() { 
    $('#myNav').slideDown(); 
}); 
}); 

：の線に沿って

何か。

また、あなたのフィーリングに問題があるようです。フッターだけが表示されます。

EDIT

それとも、あなたはこのことができます.animate()

希望を使用することができる要素のheight属性を操作したい場合。