An example of how to create an animated menu box with icons ?

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      .box {
        display: inline-block;
        float: left;
        height: 150px;
        overflow: hidden;
        width: 20%;
        -webkit-transition: width 1.2s;
        -moz-transition: width 1.2s;
        transition: width 1.2s;
      }
      .box.books {
        background-color: #1c87c9;
      }
      .box.quizzes {
        background-color: #666666;
      }
      .box.snippets {
        background-color: #e6ae2e;
      }
      .box.tools {
        background-color: #8ebf42;
      }
      .box.functions {
        background-color: #eb4034;
      }
      .box a {
        color: #eeeeee;
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
        height: 100%;
        display: block;
        padding-top: 20px;
      }
      .box span {
        display: block;
        position: relative;
        top: 100%;
        text-align: center;
        -webkit-transition: top 1s;
        -moz-transition: top 1s;
        transition: top 1s;
      }
      .nav:hover .box {
        width: 10%;
      }
      .nav .box:hover {
        width: 60%;
      }
      .box:hover span {
        top: 25%;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <div class="box books">
        <a href="#books">BOOKS
          <span>
            <i class="fas fa-book"></i>
          </span>
        </a>
      </div>
      <div class="box quizzes">
        <a href="#quizzes">QUIZZES
          <span>
            <i class="fas fa-check"></i>
          </span>
        </a>
      </div>
      <div class="box snippets">
        <a href="#snippets">SNIPPETS
          <span>
            <i class="fas fa-chalkboard-teacher"></i>
          </span>
        </a>
      </div>
      <div class="box tools">
        <a href="#tools">TOOLS
          <span>
            <i class="fas fa-tools"></i>
          </span>
        </a>
      </div>
      <div class="box functions">
        <a href="#functions">STRING FUNCTIONS
          <span>
            <i class="fas fa-file-alt"></i>
          </span>
        </a>
      </div>
    </div>
  </body>
</html>