Tryit Editor v2.6

Edit This Code:
<!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="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
</nav>

<header class="w3-container w3-teal">
    <span class="w3-opennav w3-xlarge" onclick="w3_open()">&#9776;</span>    
  <h1>My Header</h1>
</header>

<img src="img_car.png" 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>

<!-- Mirrored from www.noidatut.com/w3css/tryit.asp?filename=tryw3css_nav_sidenav_overall by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:04:50 GMT -->
</html>