•<!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-collapse w3-white w3-card-2 w3-animate-right" style="width:200px;right:0;" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-closenav w3-large w3-hide-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>
<div class="w3-main" style="margin-right:200px">
<header class="w3-container w3-teal">
<span class="w3-opennav w3-xlarge w3-hide-large w3-right" onclick="w3_open()">☰</span>
<h2>Responsive Sidenav</h2>
</header>
<div class="w3-container">
<p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 992px), and hidden on tablets and mobile phones (screens that are less than 992px wide).</p>
<p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
<p><b>Resize the browser window to understand how it works.</b></p>
</div>
