x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"><body><!-- Sidebar --><div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar"> <button onclick="w3_close()" class="w3-bar-item w3-button w3-large">Close ×</button> <a class="w3-bar-item w3-button" href="#">Link 1</a> <a class="w3-bar-item w3-button" href="#">Link 2</a> <a class="w3-bar-item w3-button" href="#">Link 3</a></div><!-- Page Content --><div class="w3-teal"> <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button> <div class="w3-container"> <h1>My Page</h1> </div></div><img src="img_car.jpg" alt="Car" style="width:100%"><div class="w3-container"><p>This sidebar is hidden by default, (style="display:none")</p><p>You must click on the "hamburger" icon (top left) to open it.</p><p>The sidebar will hide a part of the page content.</p></div><script>function w3_open() { document.getElementById("mySidebar").style.display = "block";}function w3_close() { document.getElementById("mySidebar").style.display = "none";}</script> </body></html>