[Sandbox] Simple animations on element :before for menu hover with CSS3.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
js
README.md
index.html
og-img.jpg

README.md

Menu Animation

Sandbox

Simple animations on element :before for menu hover with CSS3

Demo / Direct Download

alt text

How to contribute

  1. Fork this repo
  2. Edit the index.html and menu-animation.css
index.html
<section class="navigation navigation-NEXT-NUMBER">
  <div class="title">Menu | NEXT-NUMBER</div>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>
css/menu-animation.css
/***/
/*** NEXT-NUMBER ***/

.navigation-NEXT-NUMBER li a {
  transition: color 500ms ease-in-out;
}
.navigation-NEXT-NUMBER li a::before {
  height: 3px;
  background: #00A29A;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: scale3d(0, 1, 1);
  transition: transform 500ms;
}
.navigation-NEXT-NUMBER li:hover a {
  color: #00A29A;
}
.navigation-NEXT-NUMBER li.active a::before {
  transform: scale3d(1, 1, 1);
  transition: transform 500ms cubic-bezier(.57,1,.3,1.73);
}

And push to create a pull request

alt text About me

Follow me on Twitter - Github - Dribbble

© Théo Mesnil - 2016