Nicer Navigation with CSS Transitions

22 Comment(s) | Posted August 5, 2009 | by Eli Van Zoeren | |

Newer versions of Apple's Safari web browser (and Google Chrome, which is also based on Webkit) support a vendor-specific implementation of the CSS3 Transition property. CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects.

Quick Overview

There are three properties that make up the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three: -webkit-transition.

-webkit-transition-property: This specifies which properties of the element will be animated. If it is set to all every available property will be animated, otherwise you can choose to animate one or more individual properties and leave the rest as they are.

-webkit-transition-duration: The amount of time from the beginning of the transition to the end. This is specified in seconds: 1s, 0.5s, etc.

-webkit-transition-timing-function: There are a number of timing functions—mathematical models for how the transition takes place—that you can choose from. These include ease, linear, ease-in, ease-out, and ease-in-out as well as the ability to create your own with cubic-bezier. A detailed explanation of these modes is beyond this article, please experiment with them or see the article on The Art of Web for more detail.

-webkit-transition combines all three into a handy shortcut: -webkit-transition: all 1s ease;

A Simple Example

a { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }
a:hover { background: #220077; color: #fff; }

This is a link

When you hover over the link above you will see the text fade to white and the background fade to purple. (One of the great things about using Transitions in this way is that they degrade gracefully. If you are using a browser other than Safari you will see a normal hover effect with no transition.)

Navigation

We can use CSS Transitions to create a very nice navigation menu without JavaScript (well, maybe a little for Internet Explorer). We will start off by creating the menu using the standard CSS properties, to be sure it will degrade nicely in browsers other than Safari.

HTML

<ul id="trans-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Thingamabobs</a></li>
            <li><a href="#">Doohickies</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078 url(nav-bg.png) repeat-x 0 0; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #a3f1d7; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #63867f; }
#trans-nav li ul li a:hover { background: #5a8078; }

Notice we have a nice drop-down menu under "Products" and hover state on the top level menu items.

Enhance It!

With just four lines of CSS and without changing anything in other browsers, we can now make the menu a little nicer in Safari.

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

You might have noticed a few oddities in our original CSS. For instance, instead of hiding the submenu by settings display:none we set the height of all the sub-menu items to 0. That was in preparations for our slide-down transition. Since you can't apply a transition to display we need to find a workaround. We are also animating the hover color on the links and the background image position to get the nice fade between the normal and "pressed" states.

If you want to learn more about the details of CSS transition, see the W3's specification. There is a lot of room for creativity with this, so please share any unique transitions you come up with!

UPDATE!

Through a combination of extra css styles and JavaScript, you can make the menus work well in Internet Explorer, too! First, for all versions, you will need to hide and show the sub-menus using display: none rather than by setting the height of the menu items to zero, which leaves an ugly block of the menu's background color.

#trans-nav li ul { display: none; }
#trans-nav li:hover ul, #trans-nav li.over ul {display: block; }
#trans-nav li ul li { height: 30px; line-height: 30px; }

(Obviously, this should be in a separate stylesheet that is called with conditional comments, so it only affects IE.)

That will fix things for IE 7 and 8. Since IE 6 doesn't support the :hover pseudo-element, we need a bit of JavaScript (shamelessly stolen from the Suckerfish Dropdowns method) to fake it.

startList = function() {
    if (document.all && document.getElementById) {
        var navRoot = document.getElementById("trans-nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            var node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

And there you have it! The above demos don't work, in IE, since TinyMCE keeps messing with my code, but you can see the final version.

22 Comment(s) | Posted August 5, 2009 | by Eli Van Zoeren | |

Comments

Jarryd

August 6, 2009 at 4:35am | Permalink

Wow, very cool. Too bad its only webkit based browsers. Anything for Gecko?
Eli Van Zoeren

August 6, 2009 at 8:57am | Permalink

Jarryd: Nope, unfortunately Gecko does not support CSS transitions. If you need transitions on all browsers, you might look into something like <a href="http://www.modernizr.com/">Modernizr</a> to test if the users browser supports transitions and use JavaScript if not.
Patrick

August 8, 2009 at 12:35am | Permalink

Great Tutorial! Even just the pure CSS menu was a great find for me and the transitions made it even better. Has anyone figured out a way to get this working (the basic non-transition menu) in IE yet?
Thanks
Ryan Hamilton

August 8, 2009 at 8:54pm | Permalink

Very nice introduction to CSS transitions, too bad we'll probably have a wait a year or two before most users will be able to notice them.
Adds a nice treat to Safari users through, which is nice. I'm somewhat surprised Firefox doesn't have this functionality yet. Is Safari usually the first browser to adopt new CSS features?
Jason Pang

August 9, 2009 at 12:09pm | Permalink

This is great!
Its really a pain where not all browsers support these functions. Users experience differ when they use different browsers to visit your website.
denbagus

January 8, 2010 at 2:59am | Permalink

thank you for great tutorial ...
Web Design Philadelphia

February 9, 2010 at 3:57pm | Permalink

I'm really excited about what CSS3 has to offer. I just cant wait until it becomes the standard. Really exciting stuff.
pneumatyka

February 11, 2010 at 9:55am | Permalink

Check Opera 10.5 transitions support in Opera 10.5 beta.
Download it here: http://www.opera.com/browser/next/
Transitions article: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
Above article have some nice examples too...
So at the moment Safari, Chrome, and Opera supports it, FF will be AFAIK from 3.7, or maybe they will include it sooner in one of the updates
3.6 supports transforms, so we can use transforms everywhere now
there is a nice javascript library for IE transforms: transformie.com
SEO Freelance India

January 5, 2011 at 5:25am | Permalink

This is a good stuff, but I haven't got any point about browser compatibility issues.
Rahmat

February 22, 2011 at 7:49pm | Permalink

It is great but not pure css! It uses -webkit
Steven Marx

April 21, 2011 at 9:32pm | Permalink

Thanks for this, once I got past my own bone-headedness and saw what I was leaving out when adjusting it for a site I'm working on, it worked perfectly. Degrades nicely, at least as nicely as possible for IE, and transitions now working in FF 4.
mal2moh

July 1, 2011 at 8:22am | Permalink

very thanks for this menu
i want design top menu www.ebay.com

please help
test

July 5, 2011 at 10:31am | Permalink

test
Johnny

July 8, 2011 at 10:15am | Permalink

Try this accordion menu I just whipped up.

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family:trebuchet ms;
color:#7a2871;
}
ul{margin:0; padding:0;}
ul li{font-size:18px; line-height:24px; list-style:none}
ul li:hover {-webkit-transition:all 50ms ease;-moz-transition:all 50ms ease; font-size:20px; line-height:24px; font-weight:bold}
ul li ul{border-top:1px dashed black;border-bottom:1px dashed #7a2871; height:0px; opacity:0.0;overflow:hidden}
ul li:hover ul{display:block;border-top:1px dashed black;border-bottom:1px dashed black;padding:10px 0 10px 0;height:auto; opacity:1;-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;}
ul li ul li{font-size:14px; line-height:18px; margin-left:10px;font-weight:normal}
ul li ul li:hover{font-weight:bold;-webkit-transition:all 40ms ease-in-out;-moz-transition:all 40ms ease-in-out; font-size:16px; line-height:18px}

-->

Halloween
Christmas
Super Heroes

Easter
Hello
Hi There

list2
list2
list2
list2

xzxzczxczxc

xzxzczxczxc
Johnny

July 8, 2011 at 10:16am | Permalink

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family:trebuchet ms; color:#7a2871; } ul{margin:0; padding:0;} ul li{font-size:18px; line-height:24px; list-style:none} ul li:hover {-webkit-transition:all 50ms ease;-moz-transition:all 50ms ease; font-size:20px; line-height:24px; font-weight:bold} ul li ul{border-top:1px dashed black;border-bottom:1px dashed #7a2871; height:0px; opacity:0.0;overflow:hidden} ul li:hover ul{display:block;border-top:1px dashed black;border-bottom:1px dashed black;padding:10px 0 10px 0;height:auto; opacity:1;-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;} ul li ul li{font-size:14px; line-height:18px; margin-left:10px;font-weight:normal} ul li ul li:hover{font-weight:bold;-webkit-transition:all 40ms ease-in-out;-moz-transition:all 40ms ease-in-out; font-size:16px; line-height:18px} --> Halloween Christmas Super Heroes Easter Hello Hi There list2 list2 list2 list2 xzxzczxczxc xzxzczxczxc </code
Martin Anté

July 15, 2011 at 12:56pm | Permalink

Hello, first of all great tutorial, I really enjoyed it. But I have a question for you, how can I make it to have a width of 1000 px to be adapted to mi web page?

Thank you for everything and I am looking forward to hear from you soon.
jadav vishal

July 22, 2011 at 6:39am | Permalink

Whatever it is.. whether transi... works in ie or not.. doesnt metter.. most of the peoples r not using IE (Who r not fool)..

Good job.. dude...
Craig Gallup

January 24, 2012 at 11:17pm | Permalink

This drop down is great nice job! Is there any fix to apply to IE 8? I know this browser does not support it but when I view it in IE 8 the menu drop downs with text enclosed in them hangs down and shows. Wondering if there is anything I can do to remedy this.
sdsd

July 20, 2012 at 4:02am | Permalink

adsdsd
jhon

August 6, 2012 at 2:42am | Permalink

Even if it's already old, It still very useful dude..

Cheers!!!
Health

November 3, 2012 at 4:22pm | Permalink

very thankful from health care tube .
Augusta

May 22, 2013 at 5:28pm | Permalink

Bu yntemi kullanarak bir Keylogger bir klavye gibi hareket edebilir aygt srcs, rnein, sonradan eriilebilir.
Klavye Donanm: Donanm Keylogger yerde arasnda bal bir donanm sistemi yoluyla iletilir.
That makes it easy to use with its friendly
UI, even for the beginners. Because of the intrusive make-up of the software and use it for the purpose of monitoring.
Many common anti-spyware programs can easily remove spyware and adware programs.
First of all delete all the files associated with the identified program's identity or name.