css html menu with hover effect

i have created menu with css effect and i feel happy to share it with all of you
DEMO

copy and paste following code and save it with the extension .html or .htm

<html>
<head>
<style>
nav li  {
  text-align:center;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
nav ul li:before 
{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
nav ul li :hover, nav ul li:focus, nav ul li:active {
  color: white;
}
nav ul li:hover:before, nav ul li:focus:before, nav ul li:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

nav ul a li 
{
 line-height:35px; 
 text-decoration:none;
 color:black;
 display:inline-block;
 border:1px solid black;
 border-radius:5px;
 padding:10px;
 
}

</style>
</head>
 
<body>
<nav>
 <ul  class="bounce">

<a href="#">
<li>hover on me</li>
</a>
  <a href="#">
<li>hover on me</li>
</a>
  <a href="#">
<li>hover on me</li>
</a>
  <a href="#">
<li>hover on me</li>
</a>
  <a href="#">
<li>hover on me</li>
</a>
 
 
 </ul>
</nav>
</body>
</html>

FOR MORE USEFUL CONTENT KEEP CONNECT WITH ME AND PLEASE COMMENT YOUR SUGGESTION OR COMMENT WHAT DO YOU WANT I WIL TRY TO GIVE YOU MY BEST -THANX

"SureToCode - Your Ultimate Guide to Programming and Technology"

Search This Blog

css html menu with hover effect

Comments

Post a Comment