Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
Before we wrap this chapter up, I want to discuss a very simple way that you can further enhance your dropdown menus. CSS transitions are relatively new, and they allow you to animate the transition between one property value and another. And in the case of our dropdowns, they can help us add a little bit of animation to our menu's appearance. So let's check out how those work. We're working, once again, in the dropdown.htm from the 05_08 directory, and this is really just kind of picking in up where we left off. Now I've scrolled down to the dropdown menu styles, what we're interested in doing is I want the menu to not only not display by being off the edge of the screen, but when somebody hovers over one of the top level menu items, I would like the submenu to also sort of slide down, and transitions can really help us do that.
We're going to modify two of our existing selectors, the default submenu one so that it controls its default appearance, and then the top menu hover, which right now is controlling when it displays, but we're also going to make it control how it animates. To do this, I am going to go down just underneath left, and I am going to add a property called max-height, and I am going to set that value to 0. As I mentioned before, CSS transitions is relatively new, and one of the problems with CSS transitions is that they height the property. You can't animate that if height is set to auto, which in this case it is.
So notice for our submenu we're letting the content of the menu determine its height. In this case, we can't use height as the property that we want to animate, even though it really is the property we want to animate. Well, this is where max- height can come to our rescue. Maximum height is basically you telling the browser, look, I don't care how tall it really is in terms of the content inside of it, but this is just tall as I am going to allow it to be. So by setting the maximum height to zero, I am squashing it so that it has zero height altogether. What I am going to do next is go down to the next line, and I am going to start a transition, and I am just going to do transition.
The way that transition property works is you set it on the element that you want to animate or transition, and then you tell it which property you want to animate, and all is an option so you could go ahead and say, hey, whenever any of these properties change, go ahead and animate it. But we're going to be very specific here. So we're going to say max-height. Now, the next thing we want to do is we want to put in how long this animation should occur, and I am going to type in 0.5s for seconds. So that's going to be half a second, you can make that longer or shorter, it doesn't matter.
You can also do a delay, meaning you can wait until it's been triggered for a while and animate it in. That's very handy if you wanted to have a parent container animate in and then text fade in after, for example, you could set a delay on the text. We're not going to set a delay, we are going to move right on to what's called a timing function. What speed do you want this to move, do you want to accelerate very quickly and then slow down towards the end of the animation? Do you want it to go slow at first and then speed up? We're going to do what's called ease-in-out. It's going to go little slow at first, fast in the middle, and then a little slower on the end.
Honestly, in half a second you probably won't see it, but it makes the animation look a little bit more natural, instead of being the same speed all the way throughout. So I am going to go ahead and save that, and right now the maximum height is not changing, so it wouldn't animate at all. We need to change that property, and what I am going to do is I am going to go down here to where it says topmenu li: hover ul. And as we know, right now the property that's changing there is left, it's going from off the screen to on screen. So while it's going to on screen, I want to change the maximum height as well. And I am going to set the maximum height to 10 ems.
Remember, max-height is essentially telling a browser this is how high it can totally be. You're not setting the height to 10 ems, but I'm basically telling the browser I'm allowing it to get to 10 ems if it does. You give yourself enough empty space so that the auto height is allowed to fully complete. That's what we're doing there, and it's a nice little workaround for animating the height property. Now I am going to save this, and I still have one more thing to do here. The transition property isn't fully supported across browsers yet, so you still pretty much have to use vendor prefixes for it, so I am going to copy this, and I am going to paste it one, two, three times and want four copies of that.
In the first one, I'm going to do a -moz, that's a Mozilla vendor prefix, the second one I am going to do a -webkit, and then on the third one I am going to do a -o for Opera. Now you might notice that we don't have one for Internet Explorer, and that's because as of yet, Internet Explorer doesn't support transitions. So now I am going to save this, I am going to go out to a browser that does support it. In this case, this is Chrome. I'm going to refresh this, and now you'll notice that when I mouse over one of the top-level items, sure enough, our unordered list does exactly what we want it to do, which was animate down.
Now there is little bit of a problem, and that is the unordered list animates down, but the text already shows up. That has everything to do with the fact that we're changing the height of the unordered list but we're not affecting the height of its contents. Remember, the contents of absolutely positioned elements are allowed to spill out over the edge of the container itself just in case the container isn't large enough. So in order to stop that, I need to add one more property to my submenu, and that is overflow hidden. So essentially, now I am saying, okay, if the content can no longer fit in it, don't show the content.
Now I'll save that, go back up, reload the page, and now as I hover over these menu items you'll notice that the text does not show up until it animates down, perfect. You might be wondering about cross-browser support, what does that look like, you know, if you happen to be in a browser that doesn't support it, some of the mobile browsers don't support it, Internet Explorer doesn't support it. Well, I am going to go over to Internet Explorer, and let's just refresh the page so I am getting the latest version of it. And you'll notice that in Internet Explorer when I mouse over this, that menu just shows up. So they're not animating again, but it's not necessarily a bad user experience.
It's one of the nice things about CSS transitions, when they work, they look great, but if it doesn't work, it's not the end of the world. And that's one of the reasons just like most enhancements that you can use for your menus, I recommend that you don't go overboard with those transitions. Yes, you can animate a wide range of properties, but I've found with animations usually the subtler the better, and you want to make sure that if it does fail in an older browser or a non-supporting user agent that the functionality of the menu isn't compromised in anyway.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.