Live Code Editor Version 2.0

Hướng dẫn tạo Hoverable Sidenav - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          #mySidenav a {
              position: absolute;
              left: -80px;
              transition: 0.3s;
              padding: 15px;
              width: 100px;
              text-decoration: none;
              font-size: 20px;
              color: white;
              border-radius: 0 5px 5px 0;
          }

#mySidenav a:hover {
              left: 0;
          }

#about {
              top: 20px;
              background-color: #4CAF50;
          }

#blog {
              top: 80px;
              background-color: #2196F3;
          }

#projects {
              top: 140px;
              background-color: #f44336;
          }

#contact {
              top: 200px;
              background-color: #555
          }

</style>
    </head>
    <body> 
      <div class="container">

<div id="mySidenav" class="sidenav">
          <a href="#" id="about">Trang chủ</a>
          <a href="#" id="blog">Khóa học</a>
          <a href="#" id="projects">Tìm việc</a>
          <a href="#" id="contact">Thủ Thuật</a>
        </div>

<div style="margin-left:80px;">
          <h2>Freetuts.net hướng dẫn tạo Hoverable Sidenav</h2>
          <p>di chuột lên menu để hiện nội dung.</p>
        </div>
      </div>
    </body>
</html>