Join James Williamson for an in-depth discussion in this video Animating menus with CSS transitions, part of CSS: Styling Navigation.
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…
- 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
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.