JavaScript HTML DOM - Changing CSS-在线运行代码案例-大卫编程网

<!DOCTYPE html>
<html>
<title>JavaScript HTML DOM - Changing CSS示例 - 基础教程(div.cn)</title>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
   margin: 0;
   font-family: Lato, sans-serif;
}

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

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

#sidenav a:hover {
    color: #f1f1f1;
}

#main {
   padding: 16px;
   position: relative;
   height: 100vh;
   background: white;
   z-index: 2;
   -webkit-transition: margin-left .5s;
   transition: margin-left .5s;
}

#main.open {
   margin-left: 200px;
}
</style>
</head>
<body>

<div id="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav 推送示例</h2>
<p>单击下面的按钮以切换侧面导航菜单，并将此内容向右推。</p>
  <span style="font-size:30px;cursor:pointer" onclick="toggleNav()">&#9776; Click</span>
</div>