Category: animation

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.

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

• anime.js by Julian Garnier
• Charming.js by Yuan Qing
• Keyboard icon by Paul te Kortschot from the Noun Project

Inspiration for Menu Hover Effects was written by Mary Lou and published on Codrops.