Quay về MỤC LỤC TỰ HỌC CSS
Trong thiết kế web có 01 hiệu ứng rất hay được sử dụng:
Rê chuột ngang qua đối tượng-> sổ xuống 01 cái gì đó: gọi
là hiệu ứng dropdown.
1. Dropdown cơ bản
Ví dụ: rê chuột ngang qua đối tượng-> xổ xuống 01 nội
dung
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none; /*ẩn đối tượng khi chưa rê chuột qua*/
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none; /*ẩn đối tượng khi chưa rê chuột qua*/
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
2. Dropdown menu
Ví dụ: menu dropdown 01 cấp, rê chuột ngang qua xổ xuống
danh sách chọn lựa.
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
3. Canh lề phải nội dung có dropdown
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color:
#4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position:
relative;
display:
inline-block;
}
.dropdown-content {
display: none;
position:
absolute;
right: 0;
background-color:
#f9f9f9;
min-width: 160px;
box-shadow: 0px
8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px
16px;
text-decoration:
none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color:
#3e8e41;
}
</style>
</head>
<body>
<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go
from left to right or right to left with the left and right
properties.</p>
<div class="dropdown"
style="float:left;">
<button
class="dropbtn">Left</button>
<div
class="dropdown-content" style="left:0;">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</div>
<div class="dropdown"
style="float:right;">
<button
class="dropbtn">Right</button>
<div
class="dropdown-content">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</div>
</body>
</html>
4. Dropdown hình ảnh thumbnail
Ví dụ: hình hiển thị là thumbnail, khi rê chuột qua thì
phóng to.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position:
relative;
display:
inline-block;
}
.dropdown-content {
display: none;
position:
absolute;
background-color:
#f9f9f9;
min-width: 160px;
box-shadow: 0px
8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align:
center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the
dropdown content.</p>
<div class="dropdown">
<img
src="hinh\linh.jpg" alt="Linh" width="100"
height="50">
<div
class="dropdown-content">
<img
src="hinh\linh.jpg" alt="Linh" width="300"
height="200">
<div
class="desc">Con gái tên Linh thường rất XINH!!</div>
</div>
</div>
</body>
</html>
5. Dropdown menu chuyển hướng
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:
none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:
#333;
}
li {
float: left;
}
li a, .dropbtn {
display:
inline-block;
color: white;
text-align:
center;
padding: 14px
16px;
text-decoration:
none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color:
red;
}
li.dropdown {
display:
inline-block;
}
.dropdown-content {
display: none;
position:
absolute;
background-color:
#f9f9f9;
min-width: 160px;
box-shadow: 0px
8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px
16px;
text-decoration:
none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li
class="dropdown">
<a
href="javascript:void(0)"
class="dropbtn">Dropdown</a>
<div
class="dropdown-content">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the
dropdown menu.</p>
</body>
</html>
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét