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.



<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)


#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)


View Demo

About Ricard Torres

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

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.