Animated Menu

HTML
<ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#s1">Menu 1</a> <ul class="submenu"> <li><a href="#">Submenu a</a></li> <li><a href="#">Submenu b</a></li> <li><a href="#">Submenu c</a></li> <li><a href="#">Submenu d</a></li> <li><a href="#">Submenu e</a></li> <li><a href="#">Submenu f</a></li> <li><a href="#">Submenu g</a></li> <li><a href="#">Submenu h</a></li> </ul> </li> <li class="active"><a href="#s2">Menu 2</a> <ul class="submenu"> <li><a href="#">Submenu a</a></li> <li><a href="#">Submenu b</a></li> <li><a href="#">Submenu c</a></li> <li><a href="#">Submenu d</a></li> <li><a href="#">Submenu e</a></li> <li><a href="#">Submenu f</a></li> <li><a href="#">Submenu g</a></li> <li><a href="#">Submenu h</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul class="submenu"> <li><a href="#">Submenu a</a></li> <li><a href="#">Submenu b</a></li> <li><a href="#">Submenu c</a></li> <li><a href="#">Submenu d</a></li> <li><a href="#">Submenu e</a></li> <li><a href="#">Submenu f</a></li> <li><a href="#">Submenu g</a></li> <li><a href="#">Submenu h</a></li> </ul> </li> </ul>
SCSS
html, body { height: 100%; width: 100%; margin: 0; display: flex; justify-content: center; font-family: 'Lato', sans-serif; background: #8e9eab; background: linear-gradient(to left, #8e9eab , #eef2f3); } .menu { list-style: none; padding: 0; margin: 0; height: 58px; margin-top: 60px; ul { list-style: none; padding: 0; margin: 0; } li { background-color: #181818; border-bottom: 2px solid #181818; border-top: 2px solid #303030; min-width: 160px; display: block; float: left; position: relative; &:hover { background-color: #27272A; > a { border-left: 6px solid #CE2B67; color: #CE2B67; } } } a { border-left: 3px solid rgba(0, 0, 0, 0); color: #808080; display: block; font-size: 18px; line-height: 54px; padding: 0 25px; text-decoration: none; text-transform: uppercase; } } .submenu { left: 0; max-height: 0; position: absolute; top: 100%; z-index: 0; perspective: 400px; li { opacity: 0; transform: rotateY(90deg); transition: opacity .4s, transform .5s; } } .menu { .submenu li:hover a { border-left: 3px solid #454545; border-bottom: 3px solid #47CF73; border-radius: 0; color: #ffffff; } > li { &:hover .submenu, &:focus .submenu { max-height: 2000px; z-index: 10; } &:hover .submenu li, &:focus .submenu li { opacity: 1; transform: none; } } li:hover .submenu li { &:nth-child(1) { transition-delay: 0s; } &:nth-child(2) { transition-delay: 50ms; } &:nth-child(3) { transition-delay: 100ms; } &:nth-child(4) { transition-delay: 150ms; } &:nth-child(5) { transition-delay: 200ms; } &:nth-child(6) { transition-delay: 250ms; } &:nth-child(7) { transition-delay: 300ms; } &:nth-child(8) { transition-delay: 350ms; } } } .submenu li { &:nth-child(1) { transition-delay: 350ms; } &:nth-child(2) { transition-delay: 300ms; } &:nth-child(3) { transition-delay: 250ms; } &:nth-child(4) { transition-delay: 200ms; } &:nth-child(5) { transition-delay: 150ms; } &:nth-child(6) { transition-delay: 100ms; } &:nth-child(7) { transition-delay: 50ms; } &:nth-child(8) { transition-delay: 0s; } }
JAVASCRIPT
// Nope :)
Expand for more options Login