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>


Step 2.  Add Styling to the boxes.

    display: inline-block;
    overflow: hidden;
    -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); }  { background-color: rgba(0,0,0,0.6); }   { background-color: rgba(0,0,0,0.7); }

.box a
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    padding-top: 20px;

.box span
    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


4 thoughts on “Animated CSS Menu

  1. Hello, I use the template as002060, can you please say me in which file “.css” I can modify the titles of menu, because I use the first letter in uppercase letter and the rest in lowercase (in the configuration of the menu) and the menu is completely into lowercase?

    Example, in the page of creation of the menu I use “Welcome” and to post on the menu appears “welcome” “W” passed into lowercase and I don’t want that.

    Thank you for your answer.

    PS: I already read the various files “.CSS” I do not have find information”

Leave a Reply

Your email address will not be published.