Animated Menu link underline Effect in wordpress or HTML Css | Web design journal from Web designer Jithesh

Menu

Animated Menu link underline Effect in wordpress or HTML Css

By Jithesh P R - - No Comments

How to add animated Menu link underline effect in wordpress or HTML Css

Find your menu li class and insert below CSS code ,


    
Ist Code    

.main-navigation li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


2nd Code    
    

.main-navigation li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

    

Enjoy!

And that’s it! Firefox has had support for animation and transform without the moz prefix since version 16.0 (for over a year), so I’ve left out the prefix in the code. If you want to be safe, you should add -o and -moz to all animations and transforms.

Share This:

Post Tags:

css html wordpress

Jithesh P R

I'm Jithesh P R creative Graphic and web designer. I have a passion for designing creative Graphics and modern Websites, Specialized in creating W3C standard websites And WordPress based CMS Websites..

No Comment to " Animated Menu link underline Effect in wordpress or HTML Css "

Subscribe to: Post Comments ( Atom )

To add an Emoticons Show Icons

To add code Use [pre]code here[/pre]
To add an Image Use [img]IMAGE-URL-HERE[/img]
To add Youtube video just paste a video link like http://www.youtube.com/watch?v=0x_gnfpL3RM