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>Code language: HTML, XML (xml)

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;
}Code language: CSS (css)

Demo

View Demo

Leave a Reply

Your email address will not be published. Required fields are marked *