W3docs
en
Log in

How to Create Animated Menu Box With Icons

Animations are definitely the key to success on the website! Read this super easy tutorial and create your beautifully animated navbar with nice icons step by step.

Tags

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 navbars are built using HTML, CSS, and JavaScript.

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 a beautifully animated navbar for your website!

Create HTML

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

How to add the Font Awesome code into the <head> section

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css" />
  • Create a <div> tag with a class name "nav".
  • Create five <span class="property"> XFI4 </span> elements with class names and inside them, use the <a> tag with href attributes. Each box will contain text and an icon represented by a <span> element.

How to create the HTML structure for the menu?

<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 the element floats to the left. Specify the height, width, and transition properties.
  • 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%.
  • When hovering over a box, the inner <span> changes its top property to 25%, revealing the icon.

How to Create Animated Menu Box With Icons

.box {
  display: inline-block;
  float: left;
  height: 150px;
  overflow: hidden;
  width: 20%;
  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;
  transition: top 1s;
}

.nav:hover .box {
  width: 10%;
}

.nav .box:hover {
  width: 60%;
}

.box:hover span {
  top: 25%;
}
Try it Yourself »

Here is the full code.

Example of creating an animated navigation bar with icons:

Full example of an animated menu box with icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css" />
    <style>
      .box {
        display: inline-block;
        float: left;
        height: 150px;
        overflow: hidden;
        width: 20%;
        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;
        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>
Try it Yourself »