Dưới đây là mã để tạo các nút điều hướng sidebar có hiệu ứng hover với CSS.
Ví dụ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> nav a { position: fixed; left: -120px; transition: 0.3s; padding: 10px; width: 140px; text-decoration: none; font-size: 20px; color: black; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav a:hover { left: 0; } #Info{ top: 20px; background-color: #6de2f7; } #Social{ top: 80px; background-color: #71fc71; } #Address { top: 140px; background-color: #c4f553; } #Home { top: 200px; background-color: rgb(225, 115, 240); } </style> </head> <body> <nav> <a href="#" id="Home">Home</a> This will produce the following output: On hovering on any one of them they will expland as follows: <a href="#" id="Address">Address</a> <a href="#" id="Social">Social Links</a> <a href="#" id="Info">More Info</a> </nav> </body> </html>
Kết quả
Đoạn mã cho kết quả sau:
Khi di chuột qua bất kỳ mục nào, chúng sẽ mở rộng như sau:
