How to spice up your menu with CSS3

Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover.

CSS3MenuHoverEffect

In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item.

Each menu item (which is a unordered list item in this case) will have an anchor containing two spans and an image:

<ul class="mh-menu">
	<li>
		<a href="#">
			<span>Art Director</span> 
			<span>Henry James</span>
		</a>
		<img src="images/1.jpg" alt="image01"/>
	</li>
	<!-- ... -->
</ul>

We’ll give .mh-menu li a display block and rgba(255,255,255, 0.8) as background color. When we hover over a list item, we’ll color the background into rgba(225,239,240, 0.4) which is a light blue:

.mh-menu li:hover a{
	background: rgba(225,239,240, 0.4);
}

The second span will also change its color on hover, but we want to change each item into a different color. So, we’ll add a color transition and get each different element with the nth-child selector:

.mh-menu li a span:nth-child(2){
	/*...*/
	transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
	color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
	color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
	color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
	color: #8e7463;
}

The image will slide to the right side, so initially, it will have a left of 0px. We’ll also add a transition for its opacity; it will animate from 0 (initial value) to 1:

.mh-menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
	left: 300px;
	opacity: 1;
}

And voilร , there we have our nice slide out effect!
Make sure, that the z-index of the anchor is set to something higher than the image so that it slides under the anchor and not on top of it.

Alternatively, we can make the background color of the anchor become opaque on hover, i.e. completely white (demo 2), or color each child differently (demo 3).

The illustrations in the demo are by Bartosz Kosowski (CC BY-NC 3.0).

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 52

Comments are closed.
  1. I like very much CSS3! I believe that any moving object on a Web page should be unobtrusive and should not distract the user from the content, and at the same time, they should attract attention. This idea solves these problems. Thank you!

  2. Really nice! CSS transitions were utilized but what about browser compatibility?

  3. I need to ask, why you always use prefix on every tutorial?

    “id=mh-menu? why not just id=menu ?”

    is that generated by an engine?

  4. Wow………
    your new the is pretty good!!!
    I like it.

    How to set the different style in different browser width?
    (Can you understand??I’m taiwanese ,and my English isn’t very well….)

  5. Hi,

    Nice effect.
    It could be improved using :focus pseudo-class.
    .mh-menu li a:focus + img { left: 300px; opacity: 1; }
    or just adding the CSS selector to your :hover rule.

    Regards.

  6. I’m impressed (as usual..) I visit this site almost everyday and do not get disappointed.. ๐Ÿ™‚

  7. Nice, but is it possible to have an image to show when you’re not hovering which has the same effect? It’s kind of empty right now. I’ve tried to do this, but don’t get any further than the picture to show inbetween te slide effects.

  8. Looks great on PlayBook! What changes would you suggest, as an alternative for :hover, to support touch-screen only devices?

  9. @typ
    You may write comments like this to mislead the less experienced viewers of CSS3 tutorial and because you can’t suck their money with your crappy JS coding which, indeed, sucks the most when it comes to SEO my little charlatan.
    – – –
    great tutorials here and we need more people like you to contribute towards better web-design.
    Thanks a million!

  10. Hi Mary Lou, Thanks for sharing your great design skills with us on this page. I have used this Spice up your menu on one of my test pages. All Browsers (Chrome, Firefox, Safari, Opera) display properly. IE 8 does not. When the photo that is supposed to be hidden is half shown before and after hover effect. What do I need to adjust in the css code? Thank you so much… Keith

    • Keith, I’m not sure exactly what issue you are seeing, but it’s most likely due to the fact that CSS3 transitions are not supported in IE8. However, I do think (someone correct me if I’m wrong) that 2D transitions are now supported in IE9. Hope that helps… Snapper

      – โ€“ –
      Excellent trick Mary Lou!

  11. Mary Lou , its a great tutorial. Wooooow! Can anyone please tell me how and where can i get the animated pics like that?

  12. Nice effect, I’m also impressed with the graceful degradation in IE.

    @typ: you talk rubbish. Sorry ๐Ÿ™‚ This code is pretty clean.

  13. Cool animations, liked a lot. The only thing is not working well in IE7/8 but it’s not such a problem.

  14. Hey that is a good post & a good set of coversations too. Keep sharing, that is good…

  15. A couple of questions. Trying to decipher the values in two of the css properties. Can you give an explanation on what a couple of them mean?

    color? transition: color 2s linear

    opacity? transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

  16. Love I came across this website, just as I am learning to bring CSS into my eBay Template Idea. This site has so many great SOURCES (which alot leave out) ….KEEP UP THE GREAT WORK!

    Regards,
    @jayism
    @jaycameron

  17. Nice but dosent seem to work on ie9 or lower. Are there any possibilities of it working there?

  18. Hey thats amazing!
    I was trying to do something similar but instead of images i wanted to add some info (Maybe through iframe, or just a div tag displaying itself)! Would that be possible?
    Please help me.

  19. great script! thank you!

    is there a way to make an image stay out when I’m in a certain page?

    For example.. I’d like that when I click on Henry James it links to another page with the same menu on the top with the image still visible and a text (like a biograpfy) unther the menu.

  20. hi, very nice effects., loved it. i have used your effect in one of my site. i need a bit of help. i have made one which has three levels and i have applied the same hover effect, when user hovers on of one level, corresponding from next level slides out. I want that, instead of whole 2nd level list slides out at once, first the 1st element comes out, then the 2nd and so on. e.g if i have planets and under planets i have earth,mars etc…when user hovers over planets, instead of earth and mars coming together,1st earth should slide out, then mars and so on.. can you please suggest a way for that.
    thanks