Page Widget How to - Create menu with Link Transitions effect

Question

We would like to know how to create menu with Link Transitions effect.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!--from  w ww. ja  v  a2 s . c o m-->
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: .6s linear;
  -webkit-transition: .6s linear;
}

#nav {
  background: #000000;
  padding: 15px 0 15px 138px;
  margin: 0 0 30px 0;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav ul li {
  display: inline;
  margin: 0 0 0 45px;
  text-transform: uppercase;
  font-family: Georgia, Arial, sans-serif;
  font-size: 15px;
}

#nav ul li a {
  color: red;
  text-decoration: none;
  position: relative;
  left: 0;
}

#nav ul li a:hover, a:focus, a:active {
  color: white;
  left: 7px;
}
</style>
</head>
<body>
  <br>
  <div id="nav">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </div>
</body>
</html>

The code above is rendered as follows: