Navigation bar basic code.

<!DOCTYPE html>
<html lang=en>
<head>
<title></title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>

.bar {  width:0px;height:100vh;transition: all 0.2s linear;                        background-color:red;display:block;position:fixed;
        top:0;margin:0;left:0;  }
span { font-size:50px;text-align:center;margin:40px 0;display:block; }
.H { font-size:90px;text-align:center;margin:40px 0;font-family:arial;  }
.F { font-size:90px;text-align:center;margin:40px 0 90px 0;
     font-family:arial;  }
h2 {  margin:50px 0;padding:0 20px 0 50px;text-indent:100px;
      font-size:25px;line-height:50px; }
#close_nav {  float:right;  }
#open_bar {  position:fixed;top:10px;  }

</style>
</head>
<body>

<div class='container'>
<button onclick='open_bar()' id='open_bar'>Navigation Bar</button>
<span id='bar' class='bar'><button onclick='shut()' id='close_nav'>close</button></span>
<h1 class='H'>Header</h1>
<span>Some text</span>
<h2>Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed.

Greatly cottage thought fortune no mention he. Of mr certainty arranging am smallness by conveying. Him plate you allow built grave. Sigh sang nay sex high yet door game. She dissimilar was favourable unreserved nay expression contrasted saw. Past her find she like bore pain open. Shy lose need eyes son not shot. Jennings removing are his eat dashwood. Middleton as pretended listening he smallness perceived. Now his but two green spoil drift.

Received overcame oh sensible so at an. Formed do change merely to county it. Am separate contempt domestic to to oh. On relation my so addition branched. Put hearing cottage she norland letters equally prepare too. Replied exposed savings he no viewing as up. Soon body add him hill. No father living really people estate if. Mistake do produce beloved demesne if am pursuit. </h2>
</div>
<h1 class='F'>Footer</h1>


<script>

function shut(){
bar.style.width = 0;
}

function open_bar(){
bar.style.width = '200px';
}


</script>
</body>
</html>