menu

CSS3 Tricks - How to Create Flashing Light Animated Menu

Posted Sep 26, 2012 by Mathieu Chiasson


In today's CSS trick I'll show you how to create an animated side menu using only CSS. Tweek my example to fit your site.

First let's setup the foundation for our menu.

The HTML below won't change for the remainder of the tutorial. When I'm talking about progressive web design this is exactly what it is. Start with the information and style it to fit you page's design.

This is the worst your menu will ever look. Not great but still functional. Not very visible on my background but you should make sure to pick a color that comes out ok on your background.

The container can be anything you like. It could be your BODY tag. But make sure to have the style position: relative because we'll use absolute positioning for our menu.

Next we'll add the styles on our links to make them stand out a bit and position our menu on the right.

Now we have our base style for our menu.

I've added many styles for look purposes like text-shadow, a transparent background and some font styles. These can be customized to your liking.

Now we'll add the hover styles on the links.

Almost there.

See the fallback color? That's in case a browser doesn't support HSLA. To be honest with you, I'm not sure in what cases it works, I've look many places and this is how they propose we do it but it doesn't work in IE7. On my website I'm using IE hacks to add specific styles for IE, I'm not going to go into hacks in this post. Making sure the link color is easy to see on your page background is the best way to ensure your links are well visible in any browser.

Fun part ahead!!! Adding the flashing light animation!! Swoooosh...

For more information on CSS3 animation you can look at my previous post on Creating a Beautiful Animated Scenery.

Finished. All done. It wasn't all that bad don't you think?

As having the menu on the right is not conventional here's the code for the same menu on the left side.

I hope you enjoyed this one.

As usual, play with the styles to make it your own, or to fit you website better.

If there are any CSS3 aspects you'd like me to cover in future post add a comment below or if you implement this menu on you site let us see the result.

Comments