CSS: Styling Navigation with James Williamson

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

Introduction 3m 8s
Welcome 42s
What you should know before watching this course 1m 12s
Using the exercise files 1m 14s

1. Structuring Navigation 35m 25s
Organizing menus with lists 4m 26s
Ensuring accessibility 9m 3s
Using the nav element 7m 30s
Creating block-level links 3m 8s
Lab: Structuring navigation 4m 11s
Solution: Structuring navigation 7m 7s

2. Link Styling Basics 48m 42s
Exploring link style considerations 9m 2s
Using global link styles 9m 56s
Styling link states 10m 57s
Indicating external links 10m 4s
Styling image links 8m 43s

3. Creating a Vertical Menu 52m 5s
Stripping default list styling 4m 34s
Defining link dimensions 6m 0s
Setting link styling 3m 36s
Aligning links vertically 4m 11s
Controlling link spacing 2m 30s
Styling menus with borders 2m 32s
Creating rollovers 4m 45s
Restricting link styling 3m 31s
Lab: Creating a vertical menu 11m 44s
Solution: Creating a vertical menu 8m 42s

4. Creating Horizontal Menus 54m 58s
Stripping list styling 3m 35s
Displaying links horizontally 6m 14s
Clearing floats 6m 12s
Controlling link sizing and spacing 3m 11s
Styling links 7m 16s
Creating rollovers 5m 52s
Indicating current pages 4m 43s
Controlling cursor states 2m 46s
Lab: Creating horizontal menus 6m 45s
Solution: Creating horizontal menus 8m 24s

5. Dropdown Menus 55m 35s
Overview of dropdown menus 1m 17s
Structuring submenus 5m 56s
Styling submenus 6m 4s
Creating submenu rollovers 3m 28s
Positioning submenus 5m 43s
Controlling submenu display 5m 5s
Creating persistent hover states 5m 53s
Animating menus with CSS transitions 6m 29s
Lab: Dropdown menus 6m 51s
Solution: Dropdown menus 8m 49s

6. Enhancing Navigation with CSS 58m 7s
Creating CSS-only buttons 8m 39s
Creating special effects for buttons 4m 2s
Enhancing buttons with gradients 7m 40s
Overview of CSS sprites 3m 30s
Using CSS sprites for icons 14m 30s
Styling block-level links 8m 38s
Lab: Enhancing navigation with CSS 5m 26s
Solution: Enhancing navigation with CSS 5m 42s

Conclusion 6m 29s
Additional resources 6m 29s