/*CUSTOM ARROW ICON BUTTON*/ /*----SLIDE TOP RIGHT----*/ .hover--slide-top-right:hover path { animation: slide-top-right-out 0.2s, slide-top-right-in 0.2s 0.2s; } @keyframes slide-top-right-out{ to {transform: translate(100%, -100%) } } @keyframes slide-top-right-in{ from{ transform: translate(-100%, 100%)} to{transform: translate(0, 0) } } /*----SLIDE DOWN---*/ .hover--slide-down:hover path { animation: slide-down-out 0.2s forwards, slide-down-in 0.2s forwards 0.2s } @keyframes slide-down-out{ to { transform: translate(0, 100%) } } @keyframes slide-down-in{ from { transform: translate(0, -100%) } to {transform: translate(0, 0) } } /* CSS for menu item rollover effect */ .hover--rollover-menu li { position: relative; overflow: hidden; } .hover--rollover-menu li a{ transition: 0.3s !important } @media (min-width: 800px) { .hover--rollover-menu li a::before { content: attr(data-title); position: absolute; top: 100%; } .hover--rollover-menu li:hover a{ transform: translateY(-100%); } } // Javascript code for menu items rollover effect const menuItems = document.querySelectorAll('.hover--rollover-menu li') menuItems.forEach(menuItem => { if(menuItem){ const menuLink = menuItem.querySelector('a') const menuItemAttr = menuLink.innerText menuLink.setAttribute("data-title", menuItemAttr) } })
Share
Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
