In this post we teach web developers how to add a simple effect to a menu. All the links in the menu will change color when the user hovers over any part of the menu, subtlety highlighting the menu choices. Then, individual links change to another color, and slightly scale up when hovered over. We also use a CSS transition to make the hover smooth which add a nice polish to the menu. It's a low effort web design element that's a big upgrade.
HTML for the Hover Highlight Effect
We use the CSS framework ZURB Foundation in all of our designs and I went ahead and used it in my codepen to quickly make the menu. However you write your page and menu, have the entire menu placed in a wrapper. I used
.menu-hover-effects. We need a wrapper to get all the menu items to change color whenever the mouse hovers over any portion of the menu.
CSS for the Hover Highlights
Start by adding a transition for both the full menu, and a transition for the individual anchors.
transition: color .5s ease-in-out; for the full menu and
transition: color, transform .5s ease-in-out; for the anchor tag and anchor pseudo-classes,
a, a:link, a:visited, a:link:active, a:visited:active. I included the transform property in the anchor tags because we use that property to scale up individual links.
In some uses, I have had trouble with all of the elements inheriting the color from the parent wrapper
.menu-hover-effects, so I also applied
color:inherit to the anchor tag as well as the anchor tag pseudo-classes. This also clears up a color being applied to visited links, which may be a problem depending on your boilerplate.
CSS Properties to Create Hover Effects
When picking a text color, including for hovers, follow the web development best practice of choosing colors with an adequate contrast ratio for accessibility. I like to use WebAIM's Contrast Checker which lets one adjust the lightness of a hue until it meets whatever contrast ratio is required. Use the pseudo-selector
:hover for both the menu wrapper and the anchor tag to apply the color to the links. I wanted the hover effect to be a little more special so I added
transform: scale(1.025,1.025); to
a:hover applying a 2.5% upscale.
Many Different CSS Styles Work
If you want the hover effect to stand out more, try adding a shadow to the
a:hover pseudo class, like
text-shadow: 2px 2px 6px #999; and change the
transition: color, text-shadow .5s ease-in-out; or
transition: all .5s ease-in-out; to have the shadow transition nicely.
Color, scale, and text-shadow aren't the only properties that can highlight a menu hover. Get creative and experiment with it. But if you apply extra styles with the
a:hover tag, as with all things web design, remember to keep it all simple and subtle, don't overdo it and send your site back to the nineties. Each style should be barely noticeable, otherwise it'll look busy, cheesy, and straight-up JV.
Thanks for reading and good luck adding some cool hover effects into your next web design.