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

Hoverable Sidenav có thể hiểu như là một dạng menu động, mặc định nó sẽ không hiển thị nội dung, khi người dùng có tương tác với menu như hover hoặc click thì menu sẽ show ra nội dung của nó. Trong bài này mình sẽ hướng dẫn các bạn tạo một Hoverable Sidenav đơn giản.

Cùng tiến hành nhé!

1. Xây dựng giao diện

Bước đầu tiên là chúng ta sẽ tạo file chạy chính index.html, sau đó các bạn tạo các thành phần của menu với đoạn mã sau:

<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>Zaidap.com.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>

OK giờ chúng ta sẽ chuyển đến bước tiếp theo.

2. Thêm CSS để định dạng các thành phần

Trong bước này chúng ta sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé:

#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
}

Thuật toán chúng ta sử dụng ở đây rất đơn giản, mặc định mình sẽ để left của các menu là -80px để chúng ẩn đi một phần bên trái, sau đó khi người dùng hover vào menu, mình sẽ đặt lại left = 0 để hiển thị toàn bộ menu. Các phần CSS còn lại đều rất cơ bản nên mình sẽ không giải thích nữa.

Giờ các bạn chạy file index.html để xem kết quả.

3. Lời kết

Qua bài viết này, mình đã hướng dẫn các bạn tạo một Hoverable Sidenav, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi thiết kế menu cho website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên Zaidap.com.net

Tham khảo: w3schools.com

DEMO