Inspiration for Menu Hover Effects

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

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

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants