January 12, 2022
Меню для одностраничников
Менюшка с эффектом переключения пунктов
Цвет индикатора можете найти по классу ".indicator", поменяв background и цвет border
<div class="indicationed_nav">
<ul>
<li class="ind-list lt-active"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.7072 9.29291L21.7072 3.29291C21.7046 3.29034 21.7017 3.28821 21.6991 3.28565C21.6782 3.2652 21.6567 3.24542 21.6341 3.22687C21.6217 3.21668 21.6086 3.20783 21.5959 3.1983C21.5825 3.18829 21.5694 3.17786 21.5554 3.16858C21.5407 3.15869 21.5254 3.15015 21.5103 3.14117C21.4974 3.13348 21.4848 3.12537 21.4715 3.11823C21.4562 3.11005 21.4405 3.10309 21.4249 3.09576C21.4109 3.08917 21.3972 3.08221 21.3828 3.07623C21.3676 3.06995 21.3521 3.06488 21.3367 3.05939C21.3213 3.05383 21.3062 3.04797 21.2905 3.04321C21.275 3.03851 21.2593 3.0351 21.2437 3.03119C21.2277 3.02716 21.2119 3.02264 21.1955 3.01941C21.1774 3.01581 21.1591 3.01367 21.1409 3.01105C21.1269 3.00909 21.113 3.00641 21.0988 3.00501C21.0331 2.99854 20.9669 2.99854 20.9012 3.00501C20.887 3.00641 20.8731 3.00909 20.8591 3.01105C20.8409 3.01367 20.8226 3.01581 20.8045 3.01941C20.7881 3.02264 20.7723 3.02716 20.7563 3.03119C20.7407 3.0351 20.725 3.03851 20.7095 3.04321C20.6938 3.04797 20.6787 3.05384 20.6633 3.05939C20.6479 3.06488 20.6324 3.06995 20.6172 3.07623C20.6028 3.08221 20.5891 3.08917 20.5751 3.09576C20.5595 3.10309 20.5438 3.11005 20.5285 3.11823C20.5152 3.12537 20.5026 3.13348 20.4897 3.14117C20.4746 3.15015 20.4593 3.15869 20.4446 3.16858C20.4306 3.17786 20.4175 3.18829 20.4041 3.1983C20.3914 3.20783 20.3783 3.21668 20.3659 3.22687C20.3433 3.24542 20.3218 3.2652 20.3009 3.28565C20.2983 3.28821 20.2954 3.29034 20.2928 3.29291L14.2928 9.29291C14.1053 9.48046 14 9.73482 14 10C14 10.2653 14.1054 10.5196 14.2929 10.7072C14.4805 10.8947 14.7348 11 15 11C15.2653 11 15.5196 10.8946 15.7072 10.7071L20 6.41425V21C20 22.5913 19.3679 24.1174 18.2426 25.2426C17.1174 26.3679 15.5913 27 14 27C12.4087 27 10.8826 26.3679 9.75736 25.2426C8.63214 24.1174 8 22.5913 8 21V10C8 9.73478 7.89464 9.48043 7.70711 9.29289C7.51957 9.10536 7.26522 9 7 9C6.73478 9 6.48043 9.10536 6.29289 9.29289C6.10536 9.48043 6 9.73478 6 10V21C6 23.1217 6.84285 25.1566 8.34315 26.6569C9.84344 28.1571 11.8783 29 14 29C16.1217 29 18.1566 28.1571 19.6569 26.6569C21.1571 25.1566 22 23.1217 22 21V6.41425L26.2928 10.7071C26.4804 10.8946 26.7347 11 27 11C27.2652 11 27.5195 10.8947 27.7071 10.7072C27.8946 10.5196 28 10.2653 28 10C28 9.73483 27.8947 9.48046 27.7072 9.29291V9.29291Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 1</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27 8H21.9151C21.679 6.60197 20.9554 5.33275 19.8726 4.41747C18.7898 3.50218 17.4178 3 16 3C14.5822 3 13.2102 3.50218 12.1274 4.41747C11.0446 5.33275 10.321 6.60197 10.0849 8H5C4.46975 8.0006 3.9614 8.21151 3.58646 8.58645C3.21151 8.9614 3.00061 9.46975 3 10V26C3.00061 26.5302 3.21151 27.0386 3.58646 27.4135C3.9614 27.7885 4.46975 27.9994 5 28H27C27.5302 27.9994 28.0386 27.7885 28.4135 27.4135C28.7885 27.0386 28.9994 26.5302 29 26V10C28.9994 9.46975 28.7885 8.9614 28.4135 8.58645C28.0386 8.21151 27.5302 8.0006 27 8V8ZM11.999 13C11.999 13.2652 11.8937 13.5196 11.7061 13.7071C11.5186 13.8946 11.2642 14 10.999 14C10.7338 14 10.4795 13.8946 10.2919 13.7071C10.1044 13.5196 9.99902 13.2652 9.99902 13V11C9.99902 10.7348 10.1044 10.4804 10.2919 10.2929C10.4795 10.1054 10.7338 10 10.999 10C11.2642 10 11.5186 10.1054 11.7061 10.2929C11.8937 10.4804 11.999 10.7348 11.999 11V13ZM12.1266 8C12.3484 7.14135 12.8492 6.38074 13.5503 5.8377C14.2515 5.29467 15.1132 5 16 5C16.8868 5 17.7485 5.29467 18.4497 5.8377C19.1508 6.38074 19.6516 7.14135 19.8734 8H12.1266ZM21.999 13C21.999 13.2652 21.8937 13.5196 21.7061 13.7071C21.5186 13.8946 21.2642 14 20.999 14C20.7338 14 20.4795 13.8946 20.2919 13.7071C20.1044 13.5196 19.999 13.2652 19.999 13V11C19.999 10.7348 20.1044 10.4804 20.2919 10.2929C20.4795 10.1054 20.7338 10 20.999 10C21.2642 10 21.5186 10.1054 21.7061 10.2929C21.8937 10.4804 21.999 10.7348 21.999 11V13Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 2</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 13C13.3284 13 14 12.3284 14 11.5C14 10.6716 13.3284 10 12.5 10C11.6716 10 11 10.6716 11 11.5C11 12.3284 11.6716 13 12.5 13Z" fill="black"/>
<path d="M26 3.99995H6C5.46976 4.00056 4.9614 4.21147 4.58646 4.58641C4.21152 4.96135 4.00061 5.46971 4 5.99995V21.9967L3.99988 22.0005L4 26C4.00061 26.5302 4.21152 27.0386 4.58646 27.4135C4.9614 27.7884 5.46976 27.9993 6 28H26C26.5302 27.9993 27.0386 27.7884 27.4135 27.4135C27.7885 27.0386 27.9994 26.5302 28 26V5.99995C27.9994 5.46971 27.7885 4.96135 27.4135 4.58641C27.0386 4.21147 26.5302 4.00056 26 3.99995ZM22.4142 14C22.0388 13.6254 21.5302 13.4151 20.9999 13.4151C20.4697 13.4151 19.9611 13.6254 19.5857 14L14 19.5858L11.4142 17C11.0388 16.6255 10.5302 16.4153 9.99995 16.4153C9.46972 16.4153 8.96113 16.6255 8.5857 17L6 19.5856V5.99995H26L26.0007 17.5865L22.4142 14Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 3</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 2.99902C13.1859 3.00276 10.0087 4.32092 7.66529 6.66432C5.3219 9.00771 4.00374 12.185 4 15.499V26.0407C4.00059 26.5599 4.20712 27.0577 4.57426 27.4248C4.94139 27.7919 5.43917 27.9984 5.95837 27.999H16.5C19.8152 27.999 22.9946 26.6821 25.3388 24.3379C27.683 21.9937 29 18.8142 29 15.499C29 12.1838 27.683 9.00439 25.3388 6.66019C22.9946 4.31598 19.8152 2.99902 16.5 2.99902V2.99902ZM19.9998 18.999H12.4998C12.2345 18.999 11.9802 18.8937 11.7926 18.7061C11.6051 18.5186 11.4998 18.2642 11.4998 17.999C11.4998 17.7338 11.6051 17.4795 11.7926 17.2919C11.9802 17.1044 12.2345 16.999 12.4998 16.999H19.9998C20.265 16.999 20.5193 17.1044 20.7069 17.2919C20.8944 17.4795 20.9998 17.7338 20.9998 17.999C20.9998 18.2642 20.8944 18.5186 20.7069 18.7061C20.5193 18.8937 20.265 18.999 19.9998 18.999ZM19.9998 14.999H12.4998C12.2345 14.999 11.9802 14.8937 11.7926 14.7061C11.6051 14.5186 11.4998 14.2642 11.4998 13.999C11.4998 13.7338 11.6051 13.4795 11.7926 13.2919C11.9802 13.1044 12.2345 12.999 12.4998 12.999H19.9998C20.265 12.999 20.5193 13.1044 20.7069 13.2919C20.8944 13.4795 20.9998 13.7338 20.9998 13.999C20.9998 14.2642 20.8944 14.5186 20.7069 14.7061C20.5193 14.8937 20.265 14.999 19.9998 14.999Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 4</span></a></li>
<div class="indicator"></div>
</ul>
</div>
<style>
.indicationed_nav {
position: fixed;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
max-width: 280px;
width: 100%;
margin: auto;
left: 50%;
transform: translate(-50%, 0px);
}
.indicationed_nav ul {
padding-left: 20px;
padding-right: 20px;
border-radius: 20px;
display: flex;
width: 100%;
list-style-type: none;
background: #E7EAED;
}
.indicationed_nav ul li {
position: relative;
width: 70px;
height: 60px;
z-index: 1;
}
.indicationed_nav ul li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
}
.indicationed_nav ul li a .ind-icon {
position: relative;
display: block;
line-height: 75px;
font-size: 22px;
text-align: center;
transition: 0.5s;
}
.indicationed_nav ul li.lt-active a .ind-icon {
transform: translateY(-35px);
}
.indicationed_nav ul li a .ind-text {
position: absolute;
color: black;
font-weight: 500;
font-size: 12px;
transition: 0.5s;
opacity: 0;
transform: translateY(20px);
}
.indicationed_nav ul li.lt-active a .ind-text {
opacity: 1;
transform: translateY(10px);
}
.indicator {
left: 25px;
position: absolute;
background: #0CC041;
border: 5px double white;
width: 50px;
height: 50px;
border-radius: 50%;
transition: 0.5s linear all;
top: -50%;
}
.indicationed_nav ul li:nth-child(1).lt-active ~ .indicator {
transform: translateX(calc(60px * 0));
}
.indicationed_nav ul li:nth-child(2).lt-active ~ .indicator {
transform: translateX(calc(60px * 1));
}
.indicationed_nav ul li:nth-child(3).lt-active ~ .indicator {
transform: translateX(calc(60px * 2));
}
.indicationed_nav ul li:nth-child(4).lt-active ~ .indicator {
transform: translateX(calc(60px * 3));
}
</style>
<script>
const list = document.querySelectorAll('.ind-list');
function activeLink() {
list.forEach((item) =>
item.classList.remove('lt-active'));
this.classList.add('lt-active');
}
list.forEach((item) => item.addEventListener('click', activeLink));
</script><div class="indicationed_nav">
<ul>
<li class="ind-list lt-active"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.7072 9.29291L21.7072 3.29291C21.7046 3.29034 21.7017 3.28821 21.6991 3.28565C21.6782 3.2652 21.6567 3.24542 21.6341 3.22687C21.6217 3.21668 21.6086 3.20783 21.5959 3.1983C21.5825 3.18829 21.5694 3.17786 21.5554 3.16858C21.5407 3.15869 21.5254 3.15015 21.5103 3.14117C21.4974 3.13348 21.4848 3.12537 21.4715 3.11823C21.4562 3.11005 21.4405 3.10309 21.4249 3.09576C21.4109 3.08917 21.3972 3.08221 21.3828 3.07623C21.3676 3.06995 21.3521 3.06488 21.3367 3.05939C21.3213 3.05383 21.3062 3.04797 21.2905 3.04321C21.275 3.03851 21.2593 3.0351 21.2437 3.03119C21.2277 3.02716 21.2119 3.02264 21.1955 3.01941C21.1774 3.01581 21.1591 3.01367 21.1409 3.01105C21.1269 3.00909 21.113 3.00641 21.0988 3.00501C21.0331 2.99854 20.9669 2.99854 20.9012 3.00501C20.887 3.00641 20.8731 3.00909 20.8591 3.01105C20.8409 3.01367 20.8226 3.01581 20.8045 3.01941C20.7881 3.02264 20.7723 3.02716 20.7563 3.03119C20.7407 3.0351 20.725 3.03851 20.7095 3.04321C20.6938 3.04797 20.6787 3.05384 20.6633 3.05939C20.6479 3.06488 20.6324 3.06995 20.6172 3.07623C20.6028 3.08221 20.5891 3.08917 20.5751 3.09576C20.5595 3.10309 20.5438 3.11005 20.5285 3.11823C20.5152 3.12537 20.5026 3.13348 20.4897 3.14117C20.4746 3.15015 20.4593 3.15869 20.4446 3.16858C20.4306 3.17786 20.4175 3.18829 20.4041 3.1983C20.3914 3.20783 20.3783 3.21668 20.3659 3.22687C20.3433 3.24542 20.3218 3.2652 20.3009 3.28565C20.2983 3.28821 20.2954 3.29034 20.2928 3.29291L14.2928 9.29291C14.1053 9.48046 14 9.73482 14 10C14 10.2653 14.1054 10.5196 14.2929 10.7072C14.4805 10.8947 14.7348 11 15 11C15.2653 11 15.5196 10.8946 15.7072 10.7071L20 6.41425V21C20 22.5913 19.3679 24.1174 18.2426 25.2426C17.1174 26.3679 15.5913 27 14 27C12.4087 27 10.8826 26.3679 9.75736 25.2426C8.63214 24.1174 8 22.5913 8 21V10C8 9.73478 7.89464 9.48043 7.70711 9.29289C7.51957 9.10536 7.26522 9 7 9C6.73478 9 6.48043 9.10536 6.29289 9.29289C6.10536 9.48043 6 9.73478 6 10V21C6 23.1217 6.84285 25.1566 8.34315 26.6569C9.84344 28.1571 11.8783 29 14 29C16.1217 29 18.1566 28.1571 19.6569 26.6569C21.1571 25.1566 22 23.1217 22 21V6.41425L26.2928 10.7071C26.4804 10.8946 26.7347 11 27 11C27.2652 11 27.5195 10.8947 27.7071 10.7072C27.8946 10.5196 28 10.2653 28 10C28 9.73483 27.8947 9.48046 27.7072 9.29291V9.29291Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 1</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27 8H21.9151C21.679 6.60197 20.9554 5.33275 19.8726 4.41747C18.7898 3.50218 17.4178 3 16 3C14.5822 3 13.2102 3.50218 12.1274 4.41747C11.0446 5.33275 10.321 6.60197 10.0849 8H5C4.46975 8.0006 3.9614 8.21151 3.58646 8.58645C3.21151 8.9614 3.00061 9.46975 3 10V26C3.00061 26.5302 3.21151 27.0386 3.58646 27.4135C3.9614 27.7885 4.46975 27.9994 5 28H27C27.5302 27.9994 28.0386 27.7885 28.4135 27.4135C28.7885 27.0386 28.9994 26.5302 29 26V10C28.9994 9.46975 28.7885 8.9614 28.4135 8.58645C28.0386 8.21151 27.5302 8.0006 27 8V8ZM11.999 13C11.999 13.2652 11.8937 13.5196 11.7061 13.7071C11.5186 13.8946 11.2642 14 10.999 14C10.7338 14 10.4795 13.8946 10.2919 13.7071C10.1044 13.5196 9.99902 13.2652 9.99902 13V11C9.99902 10.7348 10.1044 10.4804 10.2919 10.2929C10.4795 10.1054 10.7338 10 10.999 10C11.2642 10 11.5186 10.1054 11.7061 10.2929C11.8937 10.4804 11.999 10.7348 11.999 11V13ZM12.1266 8C12.3484 7.14135 12.8492 6.38074 13.5503 5.8377C14.2515 5.29467 15.1132 5 16 5C16.8868 5 17.7485 5.29467 18.4497 5.8377C19.1508 6.38074 19.6516 7.14135 19.8734 8H12.1266ZM21.999 13C21.999 13.2652 21.8937 13.5196 21.7061 13.7071C21.5186 13.8946 21.2642 14 20.999 14C20.7338 14 20.4795 13.8946 20.2919 13.7071C20.1044 13.5196 19.999 13.2652 19.999 13V11C19.999 10.7348 20.1044 10.4804 20.2919 10.2929C20.4795 10.1054 20.7338 10 20.999 10C21.2642 10 21.5186 10.1054 21.7061 10.2929C21.8937 10.4804 21.999 10.7348 21.999 11V13Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 2</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 13C13.3284 13 14 12.3284 14 11.5C14 10.6716 13.3284 10 12.5 10C11.6716 10 11 10.6716 11 11.5C11 12.3284 11.6716 13 12.5 13Z" fill="black"/>
<path d="M26 3.99995H6C5.46976 4.00056 4.9614 4.21147 4.58646 4.58641C4.21152 4.96135 4.00061 5.46971 4 5.99995V21.9967L3.99988 22.0005L4 26C4.00061 26.5302 4.21152 27.0386 4.58646 27.4135C4.9614 27.7884 5.46976 27.9993 6 28H26C26.5302 27.9993 27.0386 27.7884 27.4135 27.4135C27.7885 27.0386 27.9994 26.5302 28 26V5.99995C27.9994 5.46971 27.7885 4.96135 27.4135 4.58641C27.0386 4.21147 26.5302 4.00056 26 3.99995ZM22.4142 14C22.0388 13.6254 21.5302 13.4151 20.9999 13.4151C20.4697 13.4151 19.9611 13.6254 19.5857 14L14 19.5858L11.4142 17C11.0388 16.6255 10.5302 16.4153 9.99995 16.4153C9.46972 16.4153 8.96113 16.6255 8.5857 17L6 19.5856V5.99995H26L26.0007 17.5865L22.4142 14Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 3</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 2.99902C13.1859 3.00276 10.0087 4.32092 7.66529 6.66432C5.3219 9.00771 4.00374 12.185 4 15.499V26.0407C4.00059 26.5599 4.20712 27.0577 4.57426 27.4248C4.94139 27.7919 5.43917 27.9984 5.95837 27.999H16.5C19.8152 27.999 22.9946 26.6821 25.3388 24.3379C27.683 21.9937 29 18.8142 29 15.499C29 12.1838 27.683 9.00439 25.3388 6.66019C22.9946 4.31598 19.8152 2.99902 16.5 2.99902V2.99902ZM19.9998 18.999H12.4998C12.2345 18.999 11.9802 18.8937 11.7926 18.7061C11.6051 18.5186 11.4998 18.2642 11.4998 17.999C11.4998 17.7338 11.6051 17.4795 11.7926 17.2919C11.9802 17.1044 12.2345 16.999 12.4998 16.999H19.9998C20.265 16.999 20.5193 17.1044 20.7069 17.2919C20.8944 17.4795 20.9998 17.7338 20.9998 17.999C20.9998 18.2642 20.8944 18.5186 20.7069 18.7061C20.5193 18.8937 20.265 18.999 19.9998 18.999ZM19.9998 14.999H12.4998C12.2345 14.999 11.9802 14.8937 11.7926 14.7061C11.6051 14.5186 11.4998 14.2642 11.4998 13.999C11.4998 13.7338 11.6051 13.4795 11.7926 13.2919C11.9802 13.1044 12.2345 12.999 12.4998 12.999H19.9998C20.265 12.999 20.5193 13.1044 20.7069 13.2919C20.8944 13.4795 20.9998 13.7338 20.9998 13.999C20.9998 14.2642 20.8944 14.5186 20.7069 14.7061C20.5193 14.8937 20.265 14.999 19.9998 14.999Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 4</span></a></li>
<li class="ind-list"><a href="#"><span class="ind-icon"><svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.9238 15.3827C28.8481 15.5654 28.72 15.7216 28.5555 15.8315C28.3911 15.9413 28.1978 16 28 16H23V23C23 23.2652 22.8946 23.5196 22.7071 23.7071C22.5195 23.8946 22.2652 24 22 24H9.99998C9.73477 24 9.48042 23.8946 9.29289 23.7071C9.10535 23.5196 8.99999 23.2652 8.99998 23V16H3.99998C3.8022 16 3.60887 15.9413 3.44443 15.8314C3.27999 15.7215 3.15182 15.5654 3.07613 15.3826C3.00044 15.1999 2.98063 14.9989 3.0192 14.8049C3.05777 14.6109 3.15299 14.4327 3.29283 14.2928L15.2928 2.29285C15.4804 2.10537 15.7348 2.00006 16 2.00006C16.2652 2.00006 16.5195 2.10537 16.7071 2.29285L28.7071 14.2928C28.847 14.4327 28.9422 14.6109 28.9807 14.8049C29.0193 14.9989 28.9995 15.2 28.9238 15.3827V15.3827ZM22 26H9.99998C9.73476 26 9.48041 26.1054 9.29287 26.2929C9.10534 26.4804 8.99998 26.7348 8.99998 27C8.99998 27.2652 9.10534 27.5196 9.29287 27.7071C9.48041 27.8946 9.73476 28 9.99998 28H22C22.2652 28 22.5196 27.8946 22.7071 27.7071C22.8946 27.5196 23 27.2652 23 27C23 26.7348 22.8946 26.4804 22.7071 26.2929C22.5196 26.1054 22.2652 26 22 26Z" fill="black"/>
</svg>
</span><span class="ind-text">Пункт 5</span></a></li>
<div class="indicator"></div>
</ul>
</div>
<style>
.indicationed_nav {
position: fixed;
bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
max-width: 350px;
width: 100%;
margin: auto;
left: 50%;
transform: translate(-50%, 0px);
}
.indicationed_nav ul {
padding-left: 20px;
padding-right: 20px;
border-radius: 20px;
display: flex;
width: 100%;
list-style-type: none;
background: #E7EAED;
}
.indicationed_nav ul li {
position: relative;
width: 70px;
height: 60px;
z-index: 1;
}
.indicationed_nav ul li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
}
.indicationed_nav ul li a .ind-icon {
position: relative;
display: block;
line-height: 75px;
font-size: 22px;
text-align: center;
transition: 0.5s;
}
.indicationed_nav ul li.lt-active a .ind-icon {
transform: translateY(-35px);
}
.indicationed_nav ul li a .ind-text {
position: absolute;
color: black;
font-weight: 500;
font-size: 12px;
transition: 0.5s;
opacity: 0;
transform: translateY(20px);
}
.indicationed_nav ul li.lt-active a .ind-text {
opacity: 1;
transform: translateY(10px);
}
.indicator {
left: 25px;
position: absolute;
background: #E7EAED;
border: 5px double #E7EAED;
width: 50px;
height: 50px;
border-radius: 50%;
transition: 0.5s linear all;
top: -40%;
}
.indicationed_nav ul li:nth-child(1).lt-active ~ .indicator {
transform: translateX(calc(63px * 0));
}
.indicationed_nav ul li:nth-child(2).lt-active ~ .indicator {
transform: translateX(calc(63px * 1));
}
.indicationed_nav ul li:nth-child(3).lt-active ~ .indicator {
transform: translateX(calc(63px * 2));
}
.indicationed_nav ul li:nth-child(4).lt-active ~ .indicator {
transform: translateX(calc(63px * 3));
}
.indicationed_nav ul li:nth-child(5).lt-active ~ .indicator {
transform: translateX(calc(62px * 4));
}
</style>
<script>
const list = document.querySelectorAll('.ind-list');
function activeLink() {
list.forEach((item) =>
item.classList.remove('lt-active'));
this.classList.add('lt-active');
}
list.forEach((item) => item.addEventListener('click', activeLink));
</script>