Menu Hover Effect Inspiration

I've found something similar and I wanted to build my version, the simplest code to create this hover effect on navigation items.

Watch out for vendor prefixes in transition or opacity, if you need to deal with old browsers.

The rest is straight forward. Let me know what you think.

example-32

HTML

<nav id="special-nav">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

CSS

#special-nav li {
  display: inline-block;
  margin-right: 20px;
  font-size: 20px;
  font-family: sans-serif;
  position: relative;
}

#special-nav li:after {
  content: '';
  position: absolute;
  background: white;
  width: 20%;
  height: 2px;
  left: 50%;
  bottom: -10px;
  opacity: 0;
  transition: all linear 0.3s;
  /* you might need vendor prefixes */
}

#special-nav li:hover:after {
  opacity: 1;
  /* Might need to watch for IE */
  width: 100%;
  left: 0;
}

Demo

View Demo

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*