Lưu ý: Phần chạy code phía trên có thể hoạt động không chính xác do các đường dẫn trong Menu chưa đặt cụ thể (hiện tại là #). Vậy nên hãy copy code sang website của bạn để nó hoạt động đúng cách.
Mã HTML này tạo một menu điều hướng với các tùy chọn Trang chủ, Hồ sơ, Tin nhắn, Ảnh và Cài đặt. Có thể thay đổi chức năng khác. Mỗi tùy chọn bao gồm một biểu tượng và văn bản. Điều hướng được cải tiến bằng cách sử dụng Ionicons cho các biểu tượng và bao gồm phần tử thuộc ngữ cảnh, được sử dụng để làm nổi bật mục menu đang hoạt động.
<!DOCTYPE html>
<html lang="vi" >
<head>
<meta charset="UTF-8">
<title>Navigation Menu</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person-outline"></ion-icon>
</span>
<span class="text">Profile</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
<span class="text">Message</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="image-outline"></ion-icon>
</span>
<span class="text">Photos</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="settings-outline"></ion-icon>
</span>
<span class="text">Settings</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>
<!-- partial -->
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'></script><script src="./script.js"></script>
</body>
</html>Mã CSS
CSS này tạo kiểu cho menu điều hướng có chiều rộng và chiều cao cố định, sử dụng flexbox để bố cục. Mỗi mục menu bao gồm một biểu tượng và văn bản, được định vị bằng các hiệu ứng chuyển tiếp để chuyển động mượt mà. Được biểu thị dưới dạng vòng tròn, làm nổi bật mục menu đang hoạt động. Các biến gốc (–clr) xác định bảng màu, chú ý cẩn thận đến các hiệu ứng chuyển tiếp và di chuột để mang lại trải nghiệm mượt cho người dùng.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
:root
{
--clr:#222327;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--clr);
}
.navigation
{
width: 400px;
height: 70px;
background: #fff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.navigation ul
{
display: flex;
width: 350px;
}
.navigation ul li
{
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;
}
.navigation ul li a
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: 500;
}
.navigation ul li a .icon
{
position: relative;
display: block;
line-height: 75px;
font-size: 1.5rem;
text-align: center;
transition: 0.5s;
color: var(--clr);
}
.navigation ul li.active a .icon
{
transform: translateY(-32px);
}
.navigation ul li a .text
{
position: absolute;
color: var(--clr);
font-weight: 400;
font-size: 0.75em;
letter-spacing: 0.05em;
transition: 0.5s;
opacity: 0;
transform: translateY(20px);
}
.navigation ul li.active a .text
{
transform: translateY(10px);
opacity: 1;
}
.indicator
{
position: absolute;
top: -50%;
width: 70px;
height: 70px;
background: #29fd53;
border-radius: 50%;
border: 6px solid var(--clr);
transition: 0.5s;
}
.indicator::before
{
content: '';
position: absolute;
top: 50%;
left: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-right-radius: 20px;
box-shadow: 1px -10px 0 0 var(--clr);
}
.indicator::after
{
content: '';
position: absolute;
top: 50%;
right: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-left-radius: 20px;
box-shadow: -1px -10px 0 0 var(--clr);
}
.navigation ul li:nth-child(1).active ~ .indicator
{
transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator
{
transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator
{
transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator
{
transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator
{
transform: translateX(calc(70px * 4));
}