Join James Williamson for an in-depth discussion in this video Lab: Dropdown menus, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
In our final lab we are going to take the Roux Academy website and create dropdown menus…for several of the main navigation links.…Though Roux Academy dropdowns are going to be a little different from the dropdowns…that we built in the previous exercises, it's been pretty common when we do a lab that you're…building something that's almost exactly or identical to what you're building in a previous exercises.…And in this lab, I wanted to stretch you a little, I wanted to take you a little outside…of your comfort zone and say, okay, you know the techniques.…Now let's see if you can make them work in a slightly different way.…
So let me show you what I mean.…In the Roux Academy website, when I start to mouse over these top-level items, you'll notice…we have dropdown menus for several of these that show up.…But instead of showing up as a vertical menu like we did in our exercises, these are showing…up just like another horizontal menu. They are just sort of underneath that.…There's a little bit more to these, let me show you what I mean.…
- 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.