<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../lib/w3.css">
<body>
<nav class="w3-sidenav w3-white" style="display:none">
<a href="javascript:void(0)"
onclick="w3_close()"
class="w3-closenav w3-large">Close ×</a>
<a href="tryit.asp-filename=tryw3css_sidenav_overall.html#">Link 1</a>
<a href="tryit.asp-filename=tryw3css_sidenav_overall.html#">Link 2</a>
<a href="tryit.asp-filename=tryw3css_sidenav_overall.html#">Link 3</a>
<a href="tryit.asp-filename=tryw3css_sidenav_overall.html#">Link 4</a>
<a href="tryit.asp-filename=tryw3css_sidenav_overall.html#">Link 5</a>
</nav>
<header class="w3-container w3-teal">
<span class="w3-opennav w3-xlarge" onclick="w3_open()">☰</span>
<h1>My Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div class="w3-container">
<p>In this example, the sidenav is hidden (style="display:none") and is only shown when you click on the menu icon in the top left corner. When it is opened, it hides the page content (it lays on top of it (100% width and height)).</p>
</div>
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
<script>
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.width = "100%";
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
</script>
</body>
</html>