Animated CSS Menu

In this tutorial we will create a new style navigation menu with CSS Transition effect. When the mouse hovers over a box this will grow and shrink the other boxes. We can add an icon to animate into the box to represent the page on the navigation.

How to create animated CSS Box Menu

Step 1.  Create HTML for the navigation boxes. This consists of a wrapper div element with the boxes inside. Each of the boxes will have text for the page and an image icon to represent the page.

<div class="nav">
  <div class="box home"> <a href="#home">HOME <span><img src="images/home1.png" alt="" /></span></a> </div>
  <div class="box about"> <a href="#about">ABOUT <span><img src="images/about1.png" alt="" /></span></a> </div>
  <div class="box portfolio"> <a href="#portfolio">PORTFOLIO <span><img src="images/portfolio1.png" alt="" /></span></a> </div>
  <div class="box services"> <a href="#services">SERVICES <span><img src="images/services1.png" alt="" /></span></a> </div>
  <div class="box contact"> <a href="#contact">CONTACT <span><img src="images/contact1.png" alt="" /></span></a> </div>
</div>

 

Step 2.  Add Styling to the boxes.

.box
{
    display: inline-block;
    float:left;
    height:200px;
    overflow: hidden;
    width:20%;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    transition: width 1s;
}

.box.home       { background-color: rgba(0,0,0,0.3); }
.box.about       { background-color: rgba(0,0,0,0.4); }
.box.portfolio { background-color: rgba(0,0,0,0.5); }
.box.services  { background-color: rgba(0,0,0,0.6); }
.box.contact   { background-color: rgba(0,0,0,0.7); }

.box a
{
    color:#FFF;
    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;
}

 

Step 3. Creating the hover event for the navigation, when a user moves the mouse over.

.nav:hover .box   { width:10%; }
.nav .box:hover   { width: 60%; }
.box:hover span  { top:20%; }

 

That’s it.  You can preview demo here:  Animated Box Menu Demo