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;
}