Menu là phần cốt yếu của bất cứ trang web nào. Ngay từ lần ghé thăm đầu tiên, thì một menu đẹp sẽ đem lại ấn tượng tốt đến người dùng, giúp họ dễ dàng nhận ra trang web của bạn.
Hôm nay, kiso sẽ hướng dẫn các bạn cách tạo một menu mờ như hình bên dưới
1. Phần HTML
Việc tạo bố cục khá đơn giản, với thẻ div chính và cặp thẻ ul và li . Có thể nói cặp thẻ ul và li là sự kết hợp kinh điển trong quá trình làm web menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="menu1.css">
<script src="main.js"></script>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>News</li>
<li>About Us</li>
<li>Blog</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>Lưu ý nên tạo một thẻ div chính, còn liệt kê danh sách thì đưa vào thẻ ul là li .
Bài viết này được đăng tại [kiso.vn]
Ngoài ra, nếu các bạn muốn chuyển tiếp đến đường dẫn khác thì có thể đặt thẻ a trong thẻ li .
2. Phần CSS
Trước hãy lướt qua toàn bộ mã nguồn
div {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
ul {
position: relative;
padding: 0;
list-style: none;
background-color: transparent;
}
ul:hover li {
filter: blur(10px);
}
li {
text-align: center;
width: fit-content;
display: inline-block;
transition: 0.5s ease;
padding: 20px;
text-transform: uppercase;
}
ul li:hover {
font-size: 32px;
animation: bg 1s ease-in-out forwards;
border-radius: 10px;
filter: blur(0);
cursor: pointer;
}
@keyframes bg {
0% {
background-color: transparent;
color: black;
}
100% {
background-color: darkcyan;
color: whitesmoke;
}
}Bước 1: tạo định dạng cho thẻ div
div {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}Bước 2: tạo định dạng cho thẻ ul
ul {
position: relative;
padding: 0;
list-style: none;
background-color: transparent;
}Đối với thẻ ul chúng ta sẽ phải loại bỏ kiểu mặc định bằng cách thiết lập giá trị list-style: none . Do menu theo hướng chiều ngang nên kiểu mặc định này là không cần thiết.
Thẻ ul sẽ có giá trị padding mặc định do đó cần thiết lập về 0 hoặc một giá trị khác mà bạn mong muốn, trong bài viết này kiso tạm loại bỏ hết các padding.
Bước 3: tạo định dạng cho thẻ li
li {
text-align: center;
width: fit-content;
display: inline-block;
transition: 0.5s ease;
padding: 20px;
text-transform: uppercase;
}Để các danh sách nằm trên một hàng thì thuộc tính display: inline-block được thiết lập.
Các thuộc tính mang tính trang trí văn bản text-align và text-transform cũng được thêm vào.
Bước 4: tạo định dạng hover
ul:hover li {
filter: blur(10px);
}
ul li:hover {
font-size: 32px;
animation: bg 1s ease-in-out forwards;
border-radius: 10px;
filter: blur(0);
cursor: pointer;
}Phần trọng tâm trong bước hover này là thuộc tính filter: blur(value) . Những thẻ li nào không hover sẽ bị làm mờ đi và ngược lại sẽ thể hiện rõ nét là font-size to hơn.
Lưu ý: cursor: pointer giúp thân thiện hơn với người dùng qua việc chuyển con trỏ bình thường sang dạng pointer.
Trong thuộc tính animation giá trị forwards được thiết lập nhằm mục đích lưu trạng thái cuối cùng của hiệu ứng cho thẻ li tương ứng.
Vậy điều quan trọng trong bước này là cách đặt hover như thế nào cho đúng để hiệu ứng chạy hoàn hảo nhất.
Phần animation bg sẽ được đề cập ở bước kế tiếp.
Bước 5: tạo animation
@keyframes bg {
0% {
background-color: transparent;
color: black;
}
100% {
background-color: darkcyan;
color: whitesmoke;
}
}Sẽ có hai thuộc tính được dùng: background-color và color để tăng tính tương tác. Ngoài ra, bạn có thể thêm vào các giá trị phần trăm khác để giúp chuyển động được mượt mà hơn.
3. Lời Kết
Qua bài viết này, bạn đã học được cách tạo được một menu mờ với hiệu ứng đẹp. Các bạn có thể chọn các màu sắc khác, font chữ đẹp hơn hoặc kích cỡ chữ to hơn để tạo ấn tượng mạnh hơn nữa. Kiso hy vọng nó sẽ giúp ích cho việc làm đẹp trang web của bạn.
Cảm ơn mọi người, hẹn gặp lại trong bài viết kế tiếp.
Danh sách file tải về
| Tên file tải về | Pass giải nén |
|---|---|
| Tải mã nguồn bài viết | kiso.vn hoặc gameportable.net |
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Phần HTML2. Phần CSS3. Lời Kết1. Bảo vệ...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời Kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác...