Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng hover và click cho thanh menu trong trang web bằng HTML, CSS và Javascript nhé!
Tạo Hiệu Ứng Hover, Click Cho Thanh Menu Bằng HTML, CSS, JS
Tạo Cấu Trúc Phần Tử HTML
Trước tiên chúng ta sẽ cần tạo hai file chính là index.html (Lưu trữ phần tử HTML) và style.css (Lưu trữ các thuộc tính CSS). .Sau đó liên kết chúng lại với nhau thông qua đoạn mã bên dưới:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Tạo Hiệu Ứng Hover Cho Thanh Menu Bằng HTML, CSS, JS</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:[email protected];700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav">
<a href="#" class="nav-item is-active" active-color="DarkSlateBlue">Trang Chủ</a>
<a href="#" class="nav-item" active-color="DarkKhaki">Về Chúng Tôi</a>
<a href="#" class="nav-item" active-color="DeepPink">Liên Hệ</a>
<a href="#" class="nav-item" active-color="LimeGreen">Dự Án</a>
<span class="nav-indicator"></span>
</nav>
</body>
</html>
Thuộc tính active-color sẽ được chúng ta sử dụng để thay đổi màu sắc của đường dẫn khi được active trong phần javascript nhé!
Thiết Lập Thuộc Tính CSS Cho Menu
Trong phần này chúng ta sẽ sử dụng các thuộc tính CSS để thiết lập vị trí của thanh menu, font chữ cho thẻ body, thiết kế lại thanh menu trong đẹp mắt hơn bằng các thuộc tính cơ bản như là text-decoration, box-shadow, border-radius... Để hiểu rõ hơn bạn xem đoạn mã sau nhé:
CSS
body {
text-align: center;
display: flex;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
padding: 0 20px;
font-family: "Baloo Tammudu 2";
}
.nav{
display: inline-flex;
position: relative;
overflow: hidden;
max-width: 100%;
background-color: white;
padding: 0 20px;
border-radius: 40px;
box-shadow: 0 10px 40px rgba(150, 174, 178, 0.8);
}
.nav-item{
color: #83818c;
padding: 20px;
text-decoration: none;
transition: 0.3s;
margin: 0 7px;
z-index: 1;
position: relative;
}
Và kết quả bạn xem ở bên dưới nhé:
Thêm Hiệu Ứng Hover Bằng CSS
Phần này chúng ta sẽ đi vào thêm hiệu ứng hover cho từng phần tử trong menu thông qua đoạn code sau nhé:
CSS
.nav-item:before{
content: '';
position: absolute;
bottom: -7px;
left: 0px;
width: 100%;
height: 5px;
background-color: #dfe2ea;
border-radius: 8px 8px 0 0;
opacity: 0;
transition: 0.3s;
}
.nav-item:not(.is_active):hover:before{
opacity: 1;
bottom:0;
}
.nav-item:not(.is-active):hover{
color: #333;
}
.nav-indicator{
position: absolute;
left: 0;
bottom: 0;
height: 4px;
transition: 0.4s;
height: 5px;
z-index: 1;
border-radius: 8px 8px 0 0;
}
Và kết quả bạn xem trên Codepen ở phía dưới nhé (Bạn thử hover từng phần tử trên menu để thấy hiệu ứng nhé):
See the Pen Hieu Ung Hover Menu 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thêm Màu Sắc Cho Phần Tử
Phần này chúng ta sẽ sử dụng Javascript để thêm màu sắc cho các đường dẫn trong menu khi người dùng nhấn vào phần tử trong menu (được active) thông qua thuộc tính active-color trong cấu trúc phần tử HTML. Và để hiểu rõ hơn bạn xem đoạn code sau nhé:
Javascript
<script>
var indicator = document.querySelector('.nav-indicator');
var items = document.querySelectorAll('.nav-item');
function handleIndicator(el) {
items.forEach(function (item) {
item.classList.remove('is-active');
item.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('is-active');
el.style.color = el.getAttribute('active-color');
}
items.forEach(function (item, index) {
item.addEventListener('click', function (e) {
handleIndicator(e.target);
});
item.classList.contains('is-active') && handleIndicator(item);
});
</script>
Và kết quả cuối cùng bạn xem chương trình Codepen sau đây nhé (Bạn hãy nhấn vào từng đường dẫn để thấy hiệu ứng nha):
See the Pen Hieu Ung Hover Menu 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức tạo hiệu ứng hover và click menu hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
