Page Widget How to - Create animated menu with transitions

Question

We would like to know how to create animated menu with transitions.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--   w  ww  .  jav  a2  s.  co  m-->
  margin: 2em auto;
  max-width: 40em;
  width: 100%;
}

#menu {
  display: block;
  height: 5em;
  overflow: hidden;
}

#menu strong {
  float: left;
  border-top: 2em solid;
  padding-top: 1em;
  padding-bottom: 0.5em;
  border-bottom: 0.5em solid;
}

#menu a {
  float: left;
  margin: 0 1em;
  color: #08c;
  text-decoration: none;
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  padding-top: 3em;
  padding-bottom: 1em;
  border-top: 0px solid;
  border-bottom: 0px solid;
}

#menu a:hover {
  padding-top: 1em;
  padding-bottom: 0.5em;
  border-top-width: 2em;
  border-bottom-width: 0.5em;
}
</style>
</head>
<body>
  <nav id="menu">
    <strong>Home</strong> 
    <a href="#">About</a> 
    <a href="#">Contacts</a>
    <a href="#">Product</a>
    <a href="#">Blog</a>
    <a href="#">Company</a>
  </nav>
</body>
</html>

The code above is rendered as follows: