Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Tạo menu mờ với HTML và CSS
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, freetuts 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 [free tuts .net]
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 freetuts 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. Freetuts 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 | freetuts.net hoặc gameportable.net |
