New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Styling Navigation
Illustration by

Animating menus with CSS transitions


From:

CSS: Styling Navigation

with James Williamson

Video: Animating menus with CSS transitions

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.
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Styling Navigation
5h 14m Beginner Nov 16, 2012

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.

Topics include:
  • Organizing menus with lists
  • Creating block-level links
  • Styling links, link states, and image links
  • Defining link dimensions
  • Controlling link spacing in a menu
  • Creating rollovers
  • Clearing floats
  • Indicating current pages
  • Controlling cursor states
  • Building dropdown menus
  • Creating CSS-only buttons
Subjects:
Developer Web Web Design Web Development
Software:
CSS
Author:
James Williamson

Animating menus with CSS transitions

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Styling Navigation.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.