Creative CSS3 Animation Menus

Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.

Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.

The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The typeface is done by the Just Be Nice studio.

The Markup

The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title:

<ul class="ca-menu">
	<li>
		<a href="#">
			<span class="ca-icon">A</span>
			<div class="ca-content">
				<h2 class="ca-main">Exceptional Service</h2>
				<h3 class="ca-sub">Personalized to your needs</h3>
			</div>
		</a>
	</li>
	...
</ul>

As we are using a symbol font for the icons, we write letters for the icons.

The CSS

The common style for all the examples will be the inclusion of the symbol typeface:

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The path of the files is relative to the CSS file, hence, they will be in the folder css/websymbols/.

The great advantage of having a font for the icons is that we can apply all those nice effects to it, for example a text shadow. We can also scale it to our needs.

The style for the unordered list will almost be the same for every example, we’ll just adapt the width of it, so that we can center it on the screen:

.ca-menu{
    padding: 0;
    margin: 20px auto;
    width: 500px;
}

In the following examples, I will show you the styling of the elements that will be subject to the effects.
In the first example we’ll look at the styling of all elements and in the other example we’ll be focusing on the adaptions.

Note: In the following examples I will not write any browser specific prefixes because I don’t want to bloat the CSS, but you’ll find all the necessary prefixes in the demo files.

Example 1

CreativeCSS3Menu_Example1

In this example we’ll have stacked menu where we will change the sizes of the elements and the background color of the whole item.

Let’s define the list item style:

.ca-menu li{
	width: 500px;
	height: 100px;
	overflow: hidden;
	display: block;
	background: #fff;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	margin-bottom: 4px;
	border-left: 10px solid #000;
	transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
    margin-bottom: 0px;
}

The transition will be for all properties since we’ll want to change the border color and the background color.

The link element will have the following style:

.ca-menu li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    position:relative;
}

Let’s define the style for the single elements.
The icon span will have the following style, placing it at the left side:

.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    transition: all 300ms linear;
}

As you can see, we’ll use the web symbols as the font family. Each letter will be an icon.
The wrapper for the content elements will have the following style:

.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 60px;
    top: 20px;
}

The content elements will vary in their font size and have a linear transition:

.ca-main{
    font-size: 30px;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #666;
    transition: all 300ms linear; 
}

And now it comes the interesting part. On hover over the list element we will change the font sizes and the colors:

.ca-menu li:hover{
    border-color: #fff004;
    background: #000;
}
.ca-menu li:hover .ca-icon{
    color: #fff004;
    text-shadow: 0px 0px 1px #fff004;
    font-size: 50px;
}
.ca-menu li:hover .ca-main{
    color: #fff004;
    font-size: 14px;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    font-size: 30px;
}

Since we defined a transition for each of those elements, the change will be “animated”.

Example 2

CreativeCSS3Menu_Example2
In the second example we’ll add some animations for the content elements. The idea is to animate them from the top and the bottom:

.ca-menu li:hover{
    background: #e1f0fa;
}
.ca-menu li:hover .ca-icon{
    font-size: 40px;
    color: #259add;
    opacity: 0.8;
    text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main{
    opacity: 1;
    color:#2676ac;
    animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
    opacity: 1;
    animation: moveFromBottom 300ms ease-in-out;
}

Let’s define the two animations. The first one will start from putting the respective element 200% down the Y Axis which means that it will be pushed down. Also, it will have an opacity of 0. Then it will animate to the origin by setting the translateY to 0%, basically saying we’ll go back to the point we were initially:

@keyframes moveFromBottom {
    from {
        opacity: 0;
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

The second animation will move an element from the top with the same principles:

@keyframes moveFromTop {
    from {
        opacity: 0;
        transform: translateY(-200%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

Example 3

CreativeCSS3Menu_Example3
In this example we want to change the background and text color on hover. We will also rotate and enlarge the icon. That we can do with the transform property and by enlarging the font size of the icon:

.ca-menu li:hover{
    background-color: #000;
}
.ca-menu li:hover .ca-icon{
    color: #f900b0;
    font-size: 120px;
    opacity: 0.2;
    left: -20px;
    transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
    color: #f900b0;
    opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    opacity: 0.8;
}

Example 4

CreativeCSS3Menu_Example4
Example 4 to example 8 will use a different layout for the menu. The items will be floating next to each other:

.ca-menu li{
    width: 200px;
    height: 300px;
    overflow: hidden;
    position: relative;
    float: left;
    border: 5px solid #fff;
    background: #e2f0ff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 4px;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}

The icon will be placed on the upper half in the center of the item:

.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    color: #c5e4f4;
    font-size: 90px;
    text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
    line-height: 150px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 0px;
    text-align: center;
    transition: all 200ms linear;
}

The content wrapper will be placed on the lower part of the item:

.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
}

The main title and the secondary title will have the following style:

.ca-main{
    font-size: 30px;
    color: #005382;
    opacity: 0.8;
    text-align: center;
    transition: all 200ms linear;
}
.ca-sub{
    text-align:center;
    font-size: 14px;
    color: #666;
    line-height: 40px;
    opacity: 0.8;
    transition: all 200ms linear;
}

On hover we want to blur the icon while we slide it from the top, change the background color and slide the content items from the top and bottom:

.ca-menu li:hover{
    background-color: #fff;
}
.ca-menu li:hover .ca-icon{
    text-shadow: 0px 0px 20px #c5e4f4;
    color: transparent;
    animation: moveFromTop 400ms ease;
}
.ca-menu li:hover .ca-main{
    color: #000;
    animation: moveFromTop 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #000;
    animation: moveFromBottom 500ms ease;
}

The blurring of the icon happens when we set its color to transparent and give it a text shadow with a lot of fuzziness.
The animations will be the same ones we used in one of the previous examples with the exception of the translate values for the moveFromTop animation. Here we will set the translateY to -300%.

Example 5

CreativeCSS3Menu_Example5
In the fifth example we want to slide the icon in from the left, the title from the right and the secondary title from the bottom:

.ca-menu li:hover{
    background:#fff;
}
.ca-menu li:hover .ca-icon{
    color: #afa379;
    font-size: 90px;
    opacity: 0.1;
    animation: moveFromLeft 400ms ease;
}
.ca-menu li:hover .ca-main{
    color: #afa379;
    animation: moveFromRight 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #000;
    animation: moveFromBottom 500ms ease;
}

The moveFromBottom animation we know already, let’s take a look at moveFromLeft that moves the respective element to the left by setting the translateX to -100% and then moves it back to its origin:

@keyframes moveFromLeft{
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

In the moveFromRight animation we’ll set it to translateX(100%) initially.

Example 6

CreativeCSS3Menu_Example6
In this example we want to slide in the title from the left and also rotate it at the same time:

.ca-menu li:hover{
    background-color: #000;
}
.ca-menu li:hover .ca-icon{
    color: #fff;
    font-size: 90px;
}
.ca-menu li:hover .ca-main{
    color: #00ccff;
    animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    animation: moveFromBottom 500ms ease;
}

The moveFromLeftRotate animation will move an item and rotate it:

@keyframes moveFromLeftRotate{
    from {
        transform: translateX(-100%) rotate(-90deg);
    }
    to {
        transform: translateX(0%) rotate(0deg);
    }
}

Example 7

CreativeCSS3Menu_Example7
In this example, we’ll set the secondary title to be at the bottom of the item:

.ca-sub{
    text-align:center;
    font-size: 14px;
    color: #666;
    line-height: 40px;
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    width: 100%; 
    transition: all 200ms linear;
}

We want to slide it in from the bottom and change its background color.
The icon will slide in from the bottom while the main title will appear to increase from small to big:

.ca-menu li:hover{
    background-color: #000;
}
.ca-menu li:hover .ca-icon{
    color: #ff2020;
    animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #ff2020;
    animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #000;
    background-color: #ff2020;
    animation: moveFromBottom 500ms ease;
}

The smallToBig animation is an example on how to use the scale transfrom:

@keyframes smallToBig{
    from {
        transform: scale(0.1);
    }
    to {
        transform: scale(1);
    }
}

Example 8

CreativeCSS3Menu_Example8
In this example, we want to enlarge the whole list item when hovering. We’ll do that by scaling it to 1.1.
We also have a special icon span with the ID #heart. This span will be red and on hover we’ll use the smallToBig animation in a special way: we’ll alternate the animation infinitely creating a lovely heart-beat effect.

.ca-menu li:hover{
    background-color: #000;
    z-index:999;   
    transform: scale(1.1);  
}
.ca-menu li:hover .ca-icon{
    color: #ccff00;
    font-size: 90px;
    opacity:0.3;
}
.ca-menu li:hover .ca-icon#heart{
    animation: smallToBig 900ms alternate infinite ease;
}
.ca-menu li:hover .ca-main{
    color: #ccff00;
    animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #ccff00;
    animation: moveFromBottom 500ms ease;
}

Example 9

CreativeCSS3Menu_Example9
The last two examples will be circles, so we’ll change the style for the list elements:

.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-right: 4px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
    transition: all 400ms linear;
}

In order to create a circle we need to set the border radius to half of the element’s outer width/height.
Placing the elements in the list item absolutely and centering them, we’ll do the following on hover:

.ca-menu li:hover{
    background: #f7f7f7;
    border-color: #fff;
    transform: rotate(360deg);
}
.ca-menu li:hover .ca-icon{
    color: #555;
    font-size: 60px;
}
.ca-menu li:hover .ca-main{
    display: none;
}
.ca-menu li:hover .ca-sub{
    opacity: 0.8;
}

The item will be rotated 360 degrees and the main title will disappear, letting the secondary item appear (its opacity was initially set to 0).

Example 10

CreativeCSS3Menu_Example10
In the last example, the list items are going to have a left margin of -48px. This will make overlap. Then on hover, we will scale them and increase the z-index, so that the hovered item stays on top:

.ca-menu li:hover{
    border-color: #333;
    z-index: 999;
    transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
    color: #000;
    font-size: 60px;
    text-shadow: 0px 0px 1px #000;
    animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #000;
    animation: moveFromBottom 500ms ease;
}

And that’s it! I hope you enjoyed these little experiments and find them inspiring and useful!

Please note that these animation and transitions will only work in the latest versions of truly modern web browsers, such as Google Chrome, Apple Safari and Mozilla Firefox.

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 122

Comments are closed.
  1. Great, like always, Mary Lou. But I see a small disadvantage of this and other animated menus of this kind. When clicking on a link in it a new page is loading and by that the animation is repeating. So you always have a two times popping menu. It is the same in yours http://tympanus.net/Tutorials/SlideDownBoxMenu/ As Website-Designers we have to think about what is the effect after the fancy effect.
    Don’t get me wrong, Mary Lou. The work is great and it is even more great that you share it.

  2. @George I don’t really understand what you mean with the repeating animation. It’s just a hover effect and it will not “fire” again because you are clicking on it. And if the menu is in the same place on the other page, then the hover effect will only happen if you move your mouse (which is the expected behavior). Are you saying that any hover effect on menu links is undesirable? Thanks for your feedback, cheers, ML

  3. Thanks for your answer, Mary Lou. Of course I am not saying that any hover effect is bad, but the more movement there is in a hover the more irritating it can (sic!) get on the next loaded site. And the mentioned menu at http://tympanus.net/Tutorials/SlideDownBoxMenu/ is taking action without moving the mouse.

    Once again, we all are glad that we can build great sites without flash in cause of your support!

    Warm Regards
    George

  4. Wow, this is really awesome!

    CSS3 animation is not new, but using in this way is really awesome.
    I am very much impressed with it, infact I am going to update this on my blog very soon.

    Thanks for this stylish CSS3.0 animated Menus.

  5. I also would love to see a jQuery alternative to this. You know, not everybody uses a fully CSS3 compatible browser (let´s say, IE users).

  6. What an amazing job. I’m getting a lot of good ideas because of it. Thanks a lot for your creativity.

  7. Interesting, creative, but… my eyes hurt. I’m afraid we’ll soon need a NoCSS addon along with NoScript.

    • I guess the background color animation from white to black is the reason for some eyes to hurt and some brains to seize 😀
      Using more subtle color changes like in example 2 or 5 will avoid the health risk 🙂
      Cheers, ML

  8. Tested on Mac (Safari 5.1.1 Build 6534.51.22). Everything is OK. No character swap. Awesome animation.

  9. Men, you make my day. This is terrific!!! its a shame that IE9 does not render this beauties ^_^

  10. Hi,
    Thx for the article , love the circular ones 9 and 10. I was just wondering would it be easy to add a vertical drop down to them?

    Mal

  11. Stunning. I’ll try to use these techniques in my upcoming project. 🙂 Btw Prefix free to dynamically include all the necessary vendor prefixes of CSS3 properties. Will save a lot of hassle for you.

  12. Love the animations and something we will be teaching our intermediate web design students here at Web Courses. Thanks!

  13. The best examples I ‘ve seen. I was looking for something to replace jQuery animation in my menu

  14. one word: FREAKING AMAZING! well, actually two. the quality is amazing. grate work and keep them coming!
    And the diversity of the effects is really something to look for.

  15. Hey loving this, I was wondering how I could include images. When I try it in, its not showing up… Am I just being an idiot and missing something. And dont understand the web symbols concept.

    Thanks

  16. Interesting and creative examples. Thank You!

    If you would like your code to be more semantic, please note that tag <a> can not contain block tag .

    You should use instead ad give it the block or inline-block behaviour.

  17. All the examples are amazing. I especially like example-1 and example-6. Can’t wait to try. Thanks for sharing.

  18. Hi,

    Do you know how to easily integrate it into my wordpress header because due to the default WP jquery , there is pb on the exec. Di you know what to deregister or include to integrate it well into wordpress.

    Kinds regards

  19. Hello Mary,

    Great stuff. I have some odd thing happening when I use animations or transform properties on Webkit browsers. The screen flicks less than a second, do you notice this on your browser as well?

    Many thanks.