How to Create Animated Menu Box With Icons

Navigation menus are very important for building a site. A navigation bar is a user interface element within a webpage, which contains links to other sections of the website. Most of the navbars are built using HTML, CSS, and JavaScript.

But, in this snippet, we will show how to create an animated navigation bar with icons using only HTML and CSS. Let’s dive in and make an animated beautiful navbar for your website!

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Firstly, we should copy the following code provided by Font Awesome website into the <head> of each template or page where you want to use Font Awesome icons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  • Create a <div> tag with a class name "nav".
  • Create five <div> elements with class names and inside them, use the <a> tag with ID names. Adding <span> elements, each of the boxes will have a text for the page and an image icon to represent the page.
<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>

Add CSS

  • Style the boxes by setting the display to "inline-block" and the overflow to "hidden". Set the float property to "left" so as the element floats to the left. Specify the height, width, and transition properties. (Use -webkit- and -moz- vendor prefixes with the transition property).
  • Set the background colors for all boxes with the background-color property.
  • Style the <a> and <span> tags.
  • Set the width of all boxes to 10% and the width of the box that we are hovering over to 60%.
  • The box we are hovering over has a <span> tag inside that will change the top property back to 25%, bringing the element back into view.
.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%;
}

Here is the full code.

Example of creating an animated navigation bar with icons:

<!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>