DEV Community

Cover image for Mobile icon navigation with micro interaction
Cornea Florin
Cornea Florin

Posted on • Updated on

 

Mobile icon navigation with micro interaction

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

Image description

.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);}
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Final result on codepen

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.