I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Simple HTML5 Animated Menu Bar With CSS3

css / navigation

Estimated reading time: 1 minute, 49 seconds

can be used to enhance many features of a site, including menu bar navigation. This example shows how a simple primary navigation bar, built with HTML5, can be enhanced and animated with CSS in a way that gracefully degrades for older browsers.

First, the markup, which is very simple: as the <nav> element should only be used once on a page, we don’t even need to add an id attribute:

<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Products</a>

We’ll add a and a few other basic CSS properties to the navigation bar. It is important to remember that while our background images can be any size, we should always crop them to the size that is actually going to be used; otherwise we are loading a giant image and only using a fraction of it. We’ll also add a small shadow to the link text to distinguish it from the background image.

nav { background: url(clouds.jpg) no-repeat; padding: 1em 0; }
nav a { text-decoration: none; color: #fff; padding: 1em; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); }

We’ll also add a hover state to the links, which brings in semi-transparent background:

nav a:hover { background: rgba(0, 0, 0, 0.7); }

Next, we’ll add an animation component to the default link state, to fade it in over time:

nav a { text-decoration: none; color: #fff; padding: 1em; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); transition: background 1s; }

You may notice a small gap between the background blocks of adjacent links. This is the same problem encountered in the very first horizontal navigational bar, and solved in the same way: removing the carriage returns from the between the links:

<a href="#">Home</a><a href="#">About Us</a><a href="#">Products</a>

The result: if the browser understands , the background fades in and out behind each link on hover. If the browser does not understand CSS animation, the visitor will still see a link background. As always, CSS is appearance, HTML is the markup of data, and the two remain separate.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.