Inspiration for Menu Hover Effects

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.
MenuStyles_Featured

Today we’d like to share some menu hover effects with you. We hope this set inspires you and gives you some ideas for your next project. The effects are either powered by CSS only or with the help of anime.js. Some also use Charming, for individual letter effects.

The first style is a recreation of the link hover effect seen on The Feebles with a slight adaption. The effect “Dustu” got inspired by the link hover effect seen on Flambette.

Attention: We are using some modern CSS techniques and properties for the demos (grid, flexbox) so please view them in a modern browser.

This demo is kindly sponsored by FullStory.

Example Menu Hover Effect

The structure for the menus depends on the effect but let’s have a look at the one that was inspired by the beautiful The Feebles website. We call it “Adsila”:

<nav class="menu menu--adsila">
	<a class="menu__item" href="#">
		<span class="menu__item-name">Artists</span>
		<span class="menu__item-label">Explore all artists' portfolios</span>
	</a>
	<a class="menu__item" href="#">
		<span class="menu__item-name">Exhibitions</span>
		<span class="menu__item-label">Discover their stories</span>
	</a>
	<a class="menu__item" href="#">
		<span class="menu__item-name">Schedule</span>
		<span class="menu__item-label">View our event calendar</span>
	</a>
	<a class="menu__item" href="#">
		<span class="menu__item-name">Mission</span>
		<span class="menu__item-label">Read our mission statement</span>
	</a>
	<a class="menu__item" href="#">
		<span class="menu__item-name">The Gardens</span>
		<span class="menu__item-label">Get to know our eco village</span>
	</a>
	<a class="menu__item" href="#">
		<span class="menu__item-name">Buy Tickets</span>
		<span class="menu__item-label">Purchase event tickets online</span>
	</a>
	<a class="menu__item" href="#">
		<span class="menu__item-name">Contact</span>
		<span class="menu__item-label">Get in touch and find us</span>
	</a>
</nav>

We have the following common styles for all the menus:

.menu {
	position: relative;
	z-index: 10;
}

.menu__item {
	position: relative;
	display: block;
	outline: none;
	margin: 0 0 1.5em;
	line-height: 1;
}

.menu__item-name,
.menu__item-label {
	position: relative;
	display: inline-block;
}

.menu__item-name {
	font-size: 1.25em;
}

.menu__item-label {
	margin: 0 0 0 0.5em;
}

“Adsila” has these specific styles:

.menu--adsila {
	font-size: 1.15em;
	font-family: 'Nunito', sans-serif;
}

.menu--adsila a {
	color: #272727;
}

.menu--adsila .menu__item {
	margin: 0 0 1em;
}

.menu--adsila .menu__item-name {
	padding: 0 0.35em;
	font-weight: bold;
	line-height: 1.4;
	transition: color 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-name::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 50%;
	left: 0;
	bottom: 0;
	opacity: 0.3;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-label {
	font-size: 1em;
	letter-spacing: 0.05em;
	transform: translate3d(-0.5em,0,0);
	transition: transform 0.5s, color 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-label::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 25%;
	height: 1px;
	left: 0.05em;
	top: 1.25em;
	opacity: 0.3;
	transform: scale3d(0,1,1);
	transform-origin: 100% 50%;
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item:nth-child(odd) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(odd) .menu__item-label::before {
	background: #fe628e;
}

.menu--adsila .menu__item:nth-child(even) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(even) .menu__item-label::before  {
	background: #6265fe;
}

/* Hover */

.menu--adsila .menu__item:nth-child(odd):hover,
.menu--adsila .menu__item:nth-child(odd):focus {
	color: #fe628e;
}

.menu--adsila .menu__item:nth-child(even):hover,
.menu--adsila .menu__item:nth-child(even):focus {
	color: #6265fe;
}

.menu--adsila .menu__item:hover .menu__item-name::before,
.menu--adsila .menu__item:focus .menu__item-name::before,
.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
	transform: scale3d(1,1,1);
}

.menu--adsila .menu__item:hover .menu__item-label,
.menu--adsila .menu__item:focus .menu__item-label {
	transform: translate3d(0,0,0);
}

.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
	transition-timing-function: ease;
	transform-origin: 0% 50%;
}

We have added a slight variation to the effect by moving the label a bit and showing a line left to the label. As you can see, we don’t use different colors for each item but rather, we distinguish the even and the odd ones.

We hope you enjoy these styles and find them inspirational.

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 11

  1. 3

    Truly inspiring, as always.

    If I may venture some feedback: the “crossing out” of words (such as inola and dustu) backfires at times. It’s as if it’s a correction, or a price being slashed, and not an emphasis. You graciously provide us with many other options but I usually tweak the cross-out – when possible – to become an underline.

    • 4

      @farhang
      I fully agree with your (polite) criticism of the line-through hover effect, which, luckily, I have never met in the wild. But I fully agree with your praise, too. :)

      @Mary Lou
      It’s always so interesting and inspiring to come to this site, thank you so much for your great articles!

  2. 7

    I have no clue how you come up with such a creative Idea, Please write something about that pls ! And what happened to a bit more illustrative articles like how JS script works. They used to be good lessons.

  3. 8

    I dunno…

    Yes, it’s creative – for sure. But not one of those approaches makes the menu items easier to read. Every time I hovered, I had to wait for the animation to end before I could read the text.

    I get that it’s an exploration and an experiment. But perhaps something other than a menu would have been a better target for the idea?

    Text is a page element that, in my opinion, does not benefit from animation except for a very few exceptions.

    Having said that – I love codrops and appreciate the effort that goes into these posts.

  4. 9

    This is wonderful. Manoela: can I ask you something? All the stuff you have done are the creative pieces you spend time developing. Is it possible to see the complete websites you have built? It would be great inspiration. In return I promise to be 100% Vegan for a day – no cream in coffee either (It won’t be difficult for me I am a vegetarian any way).

  5. 10

    … every time the world turns gray, I step in Codrops and suddenly colors are there again, more vivid than ever.

    — Rob

Follow this discussion

Leave a Comment