Hiệu ứng Dropdown trong CSS được sử dụng chủ yếu với các thanh menu điều hướng như một giải pháp không thể thiếu trong thiết kế trang web, đăc biệt là các website có số lượng chỉ mục nhiều, không thể sắp xếp toàn bộ trên giao diện.
Dropdown box cơ bản
Tạo một dropdown box xuất hiện khi người dùng di chuyển chuột qua một phần tử.
* {margin: 0;padding: 0;}body {margin: 0 auto;width: 80%;height: 100vh;color: black;border: 2px solid gold;}.dropdown {position: relative;display: inline-block;}.dropdownButton {background: blueviolet;color: white;padding: 10px;cursor: pointer;margin: 10px;border: none;font-weight: bold;font-size: 20px;}.dropdown-content {display: none;position: absolute;background-color: #e9d8f4;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px;z-index: 1;}.dropdown-content a{display: block;text-decoration: none;color: black;padding: 10px;}.dropdown-content a:hover{background-color: #58257b;color: white;}.dropdown:hover .dropdown-content {display: block;}
Code HTLM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="dropdown">
<span class="dropdownButton">Lập Trình</span>
<div class="dropdown-content">
<a href="">PHP</a>
<a href="">JAVA</a>
<a href="">ANDROID</a>
<a href="">ANGULAR</a>
</div>
</div>
</body>
</html>
Căn chỉnh nội dung thả xuống
Nếu bạn muốn thanh menu đổ xuống theo hướng phải sang trái thay vì trái sang phải thì có thể thêm thuộc tính right: 0.
.dropdown-content {
right: 0;
}
Ảnh Dropdown
Thêm hình ảnh và nội dung khác trong hộp thả xuống.
Thanh điều hướng Dropdown
Thêm menu thả xuống bên trong thanh điều hướng - navigation bar.
No comments:
Post a Comment