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.