Blog for you: In CSS3 Animation in Menu Navigation

Friday, September 20, 2013

In CSS3 Animation in Menu Navigation

style.css

.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: #2d89ef; }
.box.about     { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services { background-color: #9f00a7; }
.box.contact   { background-color: #ee1111; }

.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;
}

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

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

.box:hover span{ top:25%; }

menu.html

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">

</head>
    <body>
<div class="nav">
     <div class="box home">
    <a href="#home">HOME
    <span><img src="./images/home.png" alt="" /></span></a>
     </div>
     <div class="box about">
    <a href="#about">ABOUT
    <span><img src="./images/person.png" alt="" /></span></a>
      </div>
      <div class="box portfolio">
    <a href="#portfolio">PORTFOLIO
    <span><img src="./images/folder.png" alt="" /></span></a>
      </div>
     <div class="box services">
    <a href="#services">SERVICES
    <span><img src="./images/screw-driver.png" alt="" /></span></a>
     </div>
     <div class="box contact">
    <a href="#contact">CONTACT
    <span><img src="./images/mail-back.png" alt="" /></span></a>
     </div>
    </div>
</body>
</html>

It shows Like