x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="4/w3.css"><body><div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:200px;" id="mySidebar"> <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">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><div class="w3-main" style="margin-left:200px"><div class="w3-teal"> <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button> <div class="w3-container"> <h1>My Page</h1> </div></div><div class="w3-container"><h3>Responsive Sidebar</h3><p>The sidebar in this example will always be displayed on screens wider than 992px, and hidden on tablets or mobile phones (screens less than 993px wide).</p><p>On tablets and mobile phones the sidebar is replaced with a menu icon to open the sidebar.</p><p>The sidebar will overlay of the page content.</p><p><b>Resize the browser window to see how it works.</b></p>