JS/CSS 右侧侧边栏 - FACESOHO知行者

<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8"> 
<title>JS/CSS 右侧侧边栏</title> 
</head>
<body>
<style>
body {
font-family:"Lato", sans-serif;
}

.sidenav {
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
right:0;
background-color:#111;
overflow-x:hidden;
transition:0.5s;
padding-top:60px;
}

.sidenav a {
padding:8px 8px 8px 32px;
text-decoration:none;
font-size:25px;
color:#818181;
display:block;
transition:0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
color:#f1f1f1;
}

.sidenav .closebtn {
position:absolute;
top:0;
right:25px;
font-size:36px;
margin-left:50px;
}

@media screen and (max-height:450px) {
.sidenav {padding-top:15px;}
.sidenav a {font-size:18px;}
}
</style>
<div id="mySidenav" class="sidenav">
<a class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<h2>右侧侧边栏</h2>
<p>点击以下菜单图标打开侧边栏，并显示在右侧。</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ 打开</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>