Join James Williamson for an in-depth discussion in this video Using the nav element, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
The introduction of new semantic elements in HTML5 has given us additional flexibility…when we structure and style our pages.…However, it's not unusual for designers to become a little confused about when it's appropriate…to use them, so I want to take a moment to explore the nav element and how it can help…us when structuring our site's navigation.…To do that, I have the nav.htm file open from 01_03 folder, and right now I've just got…it opened up in my Browser.…And as you can see, I've added a couple of things to the page that we were using in the…previous exercise, so it's kind of a continuation of that, if you will.…
I've added a Search field down here so people can search the site.…And then if I scroll down, I've also got some links here in the bottom page. In the footer…I have some links, some additional resources where you can learn more about HTML5 elements,…you can learn more about accessibility and then just some basic site type links like…privacy statements, logins, things like that.…So those are contained down on the footer of the page, if you will.…
- 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.