Join James Williamson for an in-depth discussion in this video Indicating current pages, part of CSS: Styling Navigation.
It's not uncommon to want a menu to indicate the current page which tells the user which…page or section of the site that they're currently viewing.…Well, there are a number of techniques that allow us to do this. We're going to focus on…the most common, which is to style a class attribute.…So working in the same file, we've been working in the horizontal, this time from the 04_07 directory.…The first thing I want to do, I'm going to scroll down to the menu, and in the menu I'm…going to indicate the current page by using a class.…
So in this case, I'm just going to do the homepage, and I'm going to apply a class attribute, and…I want to create a class called current.…There are a lot of different ways that you can do this.…If you're hand-creating a site, you can certainly go in and just on every page go ahead and…apply that particular class to the current menu item.…You can certainly automate that process.…There's lot of blogging software out there that will apply that class dynamically for you.…So there are a lot of different ways to do that, but for the most part ,people are going…
- 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.