24 эффекта анимации пунктов меню при наведении в Gridbox

/* Базовый каркас ссылок меню под анимации */.ba-item-main-menu[class*="navigation-hover-"] .main-menu > .nav > li > a { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: all 0.35s ease;}.ba-item-main-menu[class*="navigation-hover-"] .main-menu > .nav > li > a span { position: relative; z-index: 2; transition: all 0.35s ease;}

document.addEventListener('DOMContentLoaded', () => { const navLinks = document.querySelectorAll('.ba-item-main-menu[class*="navigation-hover-"] .main-menu > .nav > li > a'); navLinks.forEach(link => { const text = link.innerText.trim(); link.setAttribute('data-text', text); link.setAttribute('data-hover', text); });});

navigation-hover-1

/* 1. Underline From Center */.navigation-hover-1 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: currentColor; transition: all 0.3s ease; transform: translateX(-50%);}.navigation-hover-1 .main-menu > .nav > li > a:hover::after,.navigation-hover-1 .main-menu > .nav > li.active > a::after { width: 100%;}/* 2. Underline From Left */.navigation-hover-2 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}.navigation-hover-2 .main-menu > .nav > li > a:hover::after,.navigation-hover-2 .main-menu > .nav > li.active > a::after { transform: scaleX(1);}/* 3. Underline From Right */.navigation-hover-3 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease;}.navigation-hover-3 .main-menu > .nav > li > a:hover::after,.navigation-hover-3 .main-menu > .nav > li.active > a::after { transform: scaleX(1);}/* 4. Double Line (Top & Bottom From Center) */.navigation-hover-4 .main-menu > .nav > li > a::before,.navigation-hover-4 .main-menu > .nav > li > a::after { content: ''; position: absolute; left: 50%; width: 0; height: 2px; background: currentColor; transition: all 0.3s ease; transform: translateX(-50%);}.navigation-hover-4 .main-menu > .nav > li > a::before { top: 0; }.navigation-hover-4 .main-menu > .nav > li > a::after { bottom: 0; }.navigation-hover-4 .main-menu > .nav > li > a:hover::before,.navigation-hover-4 .main-menu > .nav > li > a:hover::after { width: 100%;}/* 5. Overline From Center */.navigation-hover-5 .main-menu > .nav > li > a::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background: currentColor; transition: all 0.3s ease; transform: translateX(-50%);}.navigation-hover-5 .main-menu > .nav > li > a:hover::before { width: 100%;}/* 6. Dynamic Brackets [ Link ] */.navigation-hover-6 .main-menu > .nav > li > a::before,.navigation-hover-6 .main-menu > .nav > li > a::after { position: absolute; opacity: 0; transition: all 0.3s ease;}.navigation-hover-6 .main-menu > .nav > li > a::before { content: '['; left: 0px; transform: translateX(-10px);}.navigation-hover-6 .main-menu > .nav > li > a::after { content: ']'; right: 0px; transform: translateX(10px);}.navigation-hover-6 .main-menu > .nav > li > a:hover::before,.navigation-hover-6 .main-menu > .nav > li > a:hover::after { opacity: 1; transform: translateX(0);}/* 7. Border Box Draw */.navigation-hover-7 .main-menu > .nav > li > a { box-sizing: border-box;}.navigation-hover-7 .main-menu > .nav > li > a::after { content: ''; position: absolute; inset: 0; border: 2px solid currentColor; transform: scale(0); transition: transform 0.3s ease;}.navigation-hover-7 .main-menu > .nav > li > a:hover::after { transform: scale(1);}/* 8. Background Pill Fill */.navigation-hover-8 .main-menu > .nav > li > a::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.08); border-radius: 0px; transform: scale(0); transition: transform 0.3s ease; z-index: 1;}.navigation-hover-8 .main-menu > .nav > li > a:hover::before { transform: scale(1);}/* 9. Text Slide Up (Swap) */.navigation-hover-9 .main-menu > .nav > li > a span { display: inline-block;}.navigation-hover-9 .main-menu > .nav > li > a:hover span { transform: translateY(-150%); opacity: 0;}.navigation-hover-9 .main-menu > .nav > li > a::after { content: attr(data-text); position: absolute; top: 100%; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: top 0.35s ease; z-index: 2;}.navigation-hover-9 .main-menu > .nav > li > a:hover::after { top: 0;}/* 10. Text Slide Down (Swap) */.navigation-hover-10 .main-menu > .nav > li > a span { display: inline-block;}.navigation-hover-10 .main-menu > .nav > li > a:hover span { transform: translateY(150%); opacity: 0;}.navigation-hover-10 .main-menu > .nav > li > a::after { content: attr(data-text); position: absolute; top: -100%; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: top 0.35s ease; z-index: 2;}.navigation-hover-10 .main-menu > .nav > li > a:hover::after { top: 0;}/* 11. 3D Flip Horizontal */.navigation-hover-11 .main-menu > .nav > li > a { perspective: 600px;}.navigation-hover-11 .main-menu > .nav > li > a span { display: inline-block; transition: transform 0.4s ease;}.navigation-hover-11 .main-menu > .nav > li > a:hover span { transform: rotateY(360deg);}/* 12. 3D Flip Vertical */.navigation-hover-12 .main-menu > .nav > li > a { perspective: 600px;}.navigation-hover-12 .main-menu > .nav > li > a span { display: inline-block; transition: transform 0.4s ease;}.navigation-hover-12 .main-menu > .nav > li > a:hover span { transform: rotateX(360deg);}/* 13. Floating Dot Underneath */.navigation-hover-13 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; background: currentColor; border-radius: 50%; transform: translateX(-50%) scale(0); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.navigation-hover-13 .main-menu > .nav > li > a:hover::after { transform: translateX(-50%) scale(1);}/* 14. Strike-through */.navigation-hover-14 .main-menu > .nav > li > a::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}.navigation-hover-14 .main-menu > .nav > li > a:hover::after { transform: scaleX(1);}/* 15. Neon Glow */.navigation-hover-15 .main-menu > .nav > li > a:hover { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;}/* 16. Skew Underline */.navigation-hover-16 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: currentColor; transform: skewX(-35deg) scaleX(0); transition: transform 0.3s ease;}.navigation-hover-16 .main-menu > .nav > li > a:hover::after { transform: skewX(-35deg) scaleX(1);}/* 17. Corner Brackets */.navigation-hover-17 .main-menu > .nav > li > a::before,.navigation-hover-17 .main-menu > .nav > li > a::after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid currentColor; transition: all 0.3s ease; opacity: 0;}.navigation-hover-17 .main-menu > .nav > li > a::before { top: 0; left: 0; border-right: none; border-bottom: none; transform: translate(-4px, -4px);}.navigation-hover-17 .main-menu > .nav > li > a::after { bottom: 0; right: 0; border-left: none; border-top: none; transform: translate(4px, 4px);}.navigation-hover-17 .main-menu > .nav > li > a:hover::before,.navigation-hover-17 .main-menu > .nav > li > a:hover::after { opacity: 1; transform: translate(0, 0);}/* 18. Cross Lines (Top-Left & Bottom-Right) */.navigation-hover-18 .main-menu > .nav > li > a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}.navigation-hover-18 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease;}.navigation-hover-18 .main-menu > .nav > li > a:hover::before,.navigation-hover-18 .main-menu > .nav > li > a:hover::after { transform: scaleX(1);}/* 19. Expanding Circle */.navigation-hover-19 .main-menu > .nav > li > a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: rgba(0, 0, 0, 0.08); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease; z-index: 1;}.navigation-hover-19 .main-menu > .nav > li > a:hover::before { transform: translate(-50%, -50%) scale(25);}/* 20. Letter Spacing Expand */.navigation-hover-20 .main-menu > .nav > li > a span { transition: letter-spacing 0.3s ease;}.navigation-hover-20 .main-menu > .nav > li > a:hover span { letter-spacing: 2.5px;}/* 21. Wave Dash Underline */.navigation-hover-21 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-image: repeating-linear-gradient(90deg, currentColor, currentColor 4px, transparent 4px, transparent 8px); transform: scaleX(0); transition: transform 0.3s ease;}.navigation-hover-21 .main-menu > .nav > li > a:hover::after { transform: scaleX(1);}/* 22. Slide Diagonal Fill */.navigation-hover-22 .main-menu > .nav > li > a::before { content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 100%; background: rgba(0, 0, 0, 0.08); transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -100%, 0); transform-origin: 0% 0%; transition: transform 0.4s ease; z-index: 1;}.navigation-hover-22 .main-menu > .nav > li > a:hover::before { transform: rotate3d(0, 0, 1, 0deg);}/* 23. Bounce Text */.navigation-hover-23 .main-menu > .nav > li > a:hover span { animation: navBounce 0.5s ease;}@keyframes navBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); }}/* 24. Shimmer / Flash Line */.navigation-hover-24 .main-menu > .nav > li > a::after { content: ''; position: absolute; bottom: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, currentColor, transparent); transition: left 0.5s ease;}.navigation-hover-24 .main-menu > .nav > li > a:hover::after { left: 100%;}