I’ve been building website navigations that are enhanced with jQuery for a while now and so far I haven’t had many problems with them. But I’m always a little apprehensive about relying on JavaScript for basic functions, like animating drop down menus. It’s not really a big deal, because if you do it right, then it will still display decently if JS is turned off. A great example of how to build a drop down menu and enhance it using jQuery is Jeffery Way’s How to Build and Enhance a 3-Level Navigation Menu.
But we aren’t going to need jQuery for that type of effect much longer, now that Firefox 4 supports CSS3 transitions and, I think, Internet Explorer 9 will too. To get the same kind of effect with CSS3 takes an id or two and a few lines of CSS for each drop down you have. It’s actually a lot simpler with CSS than it is with jQuery!
Here’s a demo of what we’ll be building.
The HTML is pretty much the same as it would be with the usual navigations people have been building:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <nav>
<ul>
<a href="#"><li>HOME </li></a>
<li>
<ul id="about">
<a href="#"><li>ABOUT </li></a>
<a href="#"><li>Me </li></a>
<a href="#"><li>Education </li></a>
</ul>
</li>
<li>
<ul id="portfolio">
<a href="#"><li>PORTFOLIO </li></a>
<a href="#"><li>Websites </li></a>
<a href="#"><li>Animation </li></a>
<a href="#"><li>3D Graphics </li></a>
</ul>
</li>
<a href="#"><li>CONTACT </li></a>
</ul>
</nav> |
The only difference is, for this to work, in the <li>s with a drop down, the top level link is in the child <ul>. It’s nothing major, it’s just something that needs to be done or else the drop downs won’t work.
I’m not going to go through all the styling just the CSS that makes the drop down work.
1
2
3
4
5
6
7
8
9
10
| nav li ul {
position:absolute;
top:0;
left:0;
overflow:hidden;
height:40px;
width:120px;
-webkit-transition:height .2s ease;
-moz-transition:height .2s ease;
} |
The first 3 lines position just make sure that the child <ul> is positioned properly in the parent <li>. The overflow is set to hidden so we can’t see the drop down menu and the height is set to the height of the nav. The transition is set here for when the visitor mouses off of the navigation element.
In my example, I have two drop downs, each with their own height and because of this, they both need their own id. One is “about” and the other “portfolio”, which let’s us set this:
1
2
3
4
5
6
7
8
9
10
| #about:hover {
-webkit-transition:height .4s ease;
-moz-transition:height .4s ease;
height:120px;
}
#portfolio:hover {
-webkit-transition:height .4s ease;
-moz-transition:height .4s ease;
height:160px;
} |
And here’s what we get.
The transition property is set similar to the one in nav li ul but it’s set to be a little slower because this is where the drop down is actually animated to show itself. And the individual heights for each are set, portfolio has one more item, so it’s 40 pixels bigger than about.
So what are we doing with the transition settings? Like most CSS, this is the short hand for CSS transitions. The first element is the property we are affecting, the second is the transition delay and the third is the timing function which I’ve set to ease to just make the animation a bit smoother. You can find about more here.
And that’s it, that’s all you need to add animation to your drop downs using CSS. It’s a lot less code than the jQuery way and it’s a lot simpler. Plus, I’ve been messing with it all day and it’s impossible to break like it is with jQuery if you don’t have everything set properly. Can you start using this right now? Sure, if you don’t need to have the animation show up in IE or Firefox 3.6 or older. The drop down will still work in IE and older versions of Firefox but there just won’t be any animation, so if you’re just adding it as an extra for Webkit and Firefox 4 users than there shouldn’t be a problem.
This is one of the CSS3 features that web designers should be excited about because it’s going to make it so much easier to add the little things like this that add a lot to a website’s design.
