Сегодня вы узнаете как создать анимированный индикатор панели навигации используя HTML CSS и jаvascript. Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!--font awesome(for icons)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<div class="wrapper">
<ul class="navbar">
<li class="active">
<a href="#"><i class="fas fa-home"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-heart"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-message"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-bell"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-user"></i></a>
</li>
</ul>
<div class="indicator"></div>
</div>
CSS КОД:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #4070f4, #0b8c4c);
}
.wrapper {
position: relative;
width: 450px;
height: 80px;
background: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.wrapper .navbar {
position: relative;
display: flex;
}
.wrapper .navbar li {
list-style: none;
}
.wrapper .navbar li a {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.wrapper .navbar li a i {
font-size: 25px;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #222;
transition: 0.3s;
}
.wrapper .navbar li:not(.active):hover a i {
filter: drop-shadow(0 0 4px #222);
}
.wrapper .navbar li.active a i {
-webkit-text-fill-color: #222;
}
.wrapper .indicator {
position: absolute;
width: 20px;
height: 30px;
background: #222;
border-radius: 50%;
bottom: -22px;
left: 55px;
transition: 0.3s linear;
}
.wrapper .indicator::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: #222;
border-radius: 50%;
top: -92px;
}
jаvascript КОД:
let links = document.querySelectorAll(".navbar li");
let indicator = document.querySelector(".indicator");
links.forEach((link, index) => {
link.addEventListener("click", () => {
document.querySelector(".active").classList.remove("active");
link.classList.add("active");
indicator.style.transform = `translateX(${index * 80}px)`;
});
});