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)