R10: Five Subtle Menu Hover Effects

by | Mar 25, 2016 | Hover, Menus

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Five Subtle Menu Hover Effects

Recipe #10 is a set of five subtle menu hover effects to make your Divi menus look a little less Divi-ish!

In this recipe I will show you how to apply the effects to both the primary menu and fullwidth menu module.

You will see I have applied the ‘Pipes’ effect to the DiviSoup.com primary menu and you can see all 5 effects on the fullwidth menus on the demo page here.

So let’s get cooking!

ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
If you’re going to use the effects on the fullwidth menu module then you will need to have your menu already set up.

cooking-time

This should take you around 10 minutes max.

preparation

We’ll start with the fullwidth menu module. The first thing we need to do is create our module. So on your page add a fullwidth section and then a fullwidth menu module.

menu-hover-effects1

method

Next, open up your fullwidth menu module, select the menu you want to use from the dropdown list and adjust any settings like the background and text colours.

Five subtle menu hover effects tutorial for Divi

Now click on the Custom CSS tab and give the module the CSS Class which corresponds with the effect you want to use, I am using ds-my-menu-1 which is the pipes effect you see in the DiviSoup.com primary menu. Don’t forget to Save & Exit.

Five subtle menu hover effects tutorial for Divi

Now for the CSS, copy and paste the CSS below for the effect you want to achieve into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section.

You will see we are wrapping the CSS in a media query, this is so it doesn’t affect the menu when it switches to the mobile version at 980px.

These are the custom CSS classes for each effect which you need to add in the CSS Class field of the modules’ Custom CSS Tab:

Effect 1: ds-my-menu-1
Effect 2: ds-my-menu-2
Effect 3: ds-my-menu-3
Effect 4: ds-my-menu-4
Effect 5: ds-my-menu-5

Fullwidth Menu Effect 1 CSS - Pipes
/* Menu Effect 1 - Pipes */

@media screen and (min-width: 981px) {
.ds-my-menu-1 a::before,
.ds-my-menu-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.ds-my-menu-1 a::before {
	margin-right: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.ds-my-menu-1 a::after {
	margin-left: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.ds-my-menu-1 a:hover::before,
.ds-my-menu-1 a:hover::after,
.ds-my-menu-1 a:focus::before,
.ds-my-menu-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}
}

 

Fullwidth Menu Effect 2 CSS - Bottom Border Slide In
/* Menu Effect 2 - bottom border slide in */

@media screen and (min-width: 981px) {
.ds-my-menu-2 a {
	padding: 8px 0; /*you may want to adjust this*/
	margin-bottom: 5px; /*you may want to adjust this*/
}

.ds-my-menu-2 a::after {
	position: absolute;
	top: 60%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 4px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.ds-my-menu-2 a:hover::after,
.ds-my-menu-2 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
}

 

Fullwidth Menu Effect 3 CSS - Top Border Slide Up
/* Menu Effect 3 - Top border slide up */

@media screen and (min-width: 981px) {
.ds-my-menu-3 a {
	padding: 12px 10px 10px; /*you may want to adjust this*/
	margin-bottom: 10px; /*you may want to adjust this*/
	color: #fff;
}

.ds-my-menu-3 a::before,
.ds-my-menu-3 a::after {
	position: absolute;
	top: 65%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 3px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

.ds-my-menu-3 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.ds-my-menu-3 a:hover::before,
.ds-my-menu-3 a:hover::after,
.ds-my-menu-3 a:focus::before,
.ds-my-menu-3 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.ds-my-menu-3 a:hover::after,
.ds-my-menu-3 a:focus::after {
	top: 0%;
	opacity: 1;
}
}

 

Fullwidth Menu Effect 4 CSS - Circle
/* Menu Effect 4 - Circle */

@media screen and (min-width: 981px) {
.ds-my-menu-4 a {
	margin: 25px 5px; /*you may want to adjust this*/
}

.ds-my-menu-4 a::before,
.ds-my-menu-4 a::after {
	position: absolute;
	top: 15%; /*you may want to adjust this*/
	left: 50%;
	width: 100px; /*you may want to adjust this*/
	height: 100px; /*you may want to adjust this*/
	border: 2px solid rgba(255,255,255,0.6); /*you may want to adjust this*/
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.ds-my-menu-4 a::after {
	width: 80px; /*you may want to adjust this*/
	height: 80px; /*you may want to adjust this*/
	border-width: 6px; /*you may want to adjust this*/
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.ds-my-menu-4 a:hover::before,
.ds-my-menu-4 a:hover::after,
.ds-my-menu-4 a:focus::before,
.ds-my-menu-4 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}
}

 

Fullwidth Menu Effect 5 CSS - Borders Slide In
/* Menu Effect 5 - borders slide in */

@media screen and (min-width: 981px) {
.ds-my-menu-5 a{
	margin-bottom: 5px; /*you may want to adjust this*/
}

.ds-my-menu-5 a {
	color: #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.ds-my-menu-5 a::before,
.ds-my-menu-5 a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.ds-my-menu-5 a::before {
	top: -25%; /*you may want to adjust this*/
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.ds-my-menu-5 a::after {
	bottom: 40%; /*you may want to adjust this*/
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.ds-my-menu-5 a:hover,
.ds-my-menu-5 a:focus {
	color: #fff;
}

.ds-my-menu-5 a:hover::before,
.ds-my-menu-5 a:focus::before,
.ds-my-menu-5 a:hover::after,
.ds-my-menu-5 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
}

 

Now for the primary menu. There are no modules to create and we don’t need any custom classes as the primary menu has it’s own unique identifier so all we need to do is add the CSS for the effect we want. We also don’t need any media queries as Divi will make that switch for us automatically.

Here’s is the CSS for each effect for the primary menu.

Primary Menu Effect 1 CSS - Pipes
/* Menu Effect 1 - Pipes */

#top-menu a::before,
#top-menu a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

#top-menu a::before {
	margin-right: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

#top-menu a::after {
	margin-left: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

 

Primary Menu Effect 2 CSS - Bottom Border Slide In
/* Menu Effect 2 - bottom border slide in */

#top-menu a {
	padding: 8px 0; /*you may want to adjust this*/
}

#top-menu a::after {
	position: absolute;
	top: 50%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 4px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

#top-menu a:hover::after,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

 

Primary Menu Effect 3 CSS - Top Border Slide Up
/* Menu Effect 3 - Bottom border slides up */

#top-menu a {
	padding: 12px 10px 10px; /*you may want to adjust this*/
	color: #fff;
}

#top-menu a::before,
#top-menu a::after {
	position: absolute;
	top: 60%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 3px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

#top-menu a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

#top-menu a:hover::after,
#top-menu a:focus::after {
	top: 0%; /*you may want to adjust this*/
	opacity: 1;
}

 

Primary Menu Effect 4 CSS - Circle
/* Menu Effect 4 - Circle */
#top-menu a {
	margin: 5px; /*you may want to adjust this*/
}

#top-menu a::before,
#top-menu a::after {
	position: absolute;
	top: 15%; /*you may want to adjust this*/
	left: 50%;
	width: 80px; /*you may want to adjust this*/
	height: 80px; /*you may want to adjust this*/
	border: 2px solid rgba(255,255,255,0.6); /*you may want to adjust this*/
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

#top-menu a::after {
	width: 60px; /*you may want to adjust this*/
	height: 60px; /*you may want to adjust this*/
	border-width: 6px; /*you may want to adjust this*/
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

 

Primary Menu Effect 5 CSS - Borders Slide In
/* Menu Effect 5 - borders slide in */

#top-menu a {
	color: #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

#top-menu a::before,
#top-menu a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

#top-menu a::before {
	top: -25%; /*you may want to adjust this*/
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

#top-menu a::after {
	bottom: 40%; /*you may want to adjust this*/
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

#top-menu a:hover,
#top-menu a:focus {
	color: #fff;
}

#top-menu a:hover::before,
#top-menu a:focus::before,
#top-menu a:hover::after,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

 

I have added some comments to the CSS in the areas that may need adjusting depending on your own menu settings. You may need to play with these to get everything sitting just where you want it. You may also want to change the colours to suit your colour scheme.

And that’s it. Now you have some subtle hover effects to help make your Divi menus a little less Divi-ish ;).

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!