Simple and nice looking mobile navigation with micro interactions
Required tools
Let's brake down the micro interaction part
For a noice effect we can do an annimation where we scale up and down the icon while user is clicking on it
.menu ul li a:focus:not(.home) i { animation-name: pop; animation-duration: .5s; } @keyframes pop { 0% {transform: scale(.8);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} } The actual nav
The menu itself is just a quick nav tag with an unordered list of icons
<nav class="menu"> <ul> <li> <a href="#"><i class="fas fa-comment-alt-lines"></i></a> </li> <li> <a href="#"><i class="fas fa-bell"></i></a> </li> <li> <a href="#" class="home"><i class="fas fa-store"></i></a> </li> <li> <a href="#"><i class="fas fa-shopping-bag"></i></a> </li> <li> <a href="#"><i class="fas fa-user"></i></a> </li> </ul> </nav> .menu { width: 300px; background-color: #fff; box-shadow: 0px -2px 15px -3px #ffa8ba; padding: 0px 20px; border-radius: 25px; } .menu ul { list-style: none; display: grid; grid-template-columns: auto auto auto auto auto; padding: 0; margin: 0; } .menu ul li { text-align: center; box-sizing: border-box; } .menu ul li a { display: block; width: 100%; padding: 10px 0; border-top: 2px solid; border-color: transparent; color: #888; } .menu ul li a:hover:not(.home) { border-top: 2px solid #fc466b; color: #999; } .menu ul li a:focus:not(.home) { border-top: 2px solid #fc466b; color: #fc466b; } .menu ul li a:focus:not(.home) i { animation-name: pop; animation-duration: .5s; } @keyframes pop { 0% {transform: scale(.8);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} } .menu ul li a.home { color: #fff; background: #fc466b; border-radius: 20px; } Final result on codepen
Top comments (0)