Edit This Code:
See Result »
<!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()">☰</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 a part of the page content (it lays on top of it).</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.display = "block"; } function w3_close() { document.getElementsByClassName("w3-sidenav")[0].style.display = "none"; } </script> </body> <!-- Mirrored from www.w3schools.com/w3css/tryit.asp?filename=tryw3css_nav_sidenav_overlay by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:04:50 GMT --> </html>
Result: