Mobile icon navigation with micro interaction

#css #ui #beginners #codepen

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)

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.