<!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 w3-card-2" style="display:none">
<a href="javascript:void(0)"
onclick="w3_close()"
class="w3-closenav w3-large">Close ×</a>
<a href="tryit.asp-filename=tryw3css_ref_sidenav_shift.html#">Link 1</a>
<a href="tryit.asp-filename=tryw3css_ref_sidenav_shift.html#">Link 2</a>
<a href="tryit.asp-filename=tryw3css_ref_sidenav_shift.html#">Link 3</a>
<a href="tryit.asp-filename=tryw3css_ref_sidenav_shift.html#">Link 4</a>
<a href="tryit.asp-filename=tryw3css_ref_sidenav_shift.html#">Link 5</a>
</nav>
<div id="main">
<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>
A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people,
to typically have four wheels. (Wikipedia)
</p>
</div>
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
</div>
<script>
function w3_open() {
document.getElementById("main").style.marginLeft = "25%"
document.getElementsByClassName("w3-sidenav")[0].style.width ="25%";
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
document.getElementsByClassName("w3-opennav")[0].style.display = 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft = "0%";
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
document.getElementsByClassName("w3-opennav")[0].style.display = "inline-block";
}
</script>
</body>
</html>