Author
James Williamson
Released
11/16/2012- 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
Duration
Views
- [Voiceover] Hi, I'm James Williamson, Senior Author at Lynda.com and I wanna welcome you to CSS Styling Navigation. In this course, we're gonna explore controlling the presentation of site navigation through CSS. We'll start off by exploring how to properly structure navigation and then move on to establishing solid, basic link styling for your site. From there, we'll go on to creating multiple menu types including pure CSS dropdown menus and we'll finish up by looking at ways that you can enhance your overall site navigation through CSS.
Fire up your favorite code editor and let's get started with CSS Styling Navigation.
-
Introduction
-
Welcome42s
-
Using the exercise files1m 14s
-
-
1. Structuring Navigation
-
Organizing menus with lists4m 26s
-
Ensuring accessibility9m 3s
-
Using the nav element7m 30s
-
Lab: Structuring navigation4m 11s
-
-
2. Link Styling Basics
-
Using global link styles9m 56s
-
Styling link states10m 57s
-
Indicating external links10m 4s
-
Styling image links8m 43s
-
3. Creating a Vertical Menu
-
Setting link styling3m 36s
-
Aligning links vertically4m 11s
-
Controlling link spacing2m 30s
-
Styling menus with borders2m 32s
-
Creating rollovers4m 45s
-
Restricting link styling3m 31s
-
Lab: Creating a vertical menu11m 44s
-
4. Creating Horizontal Menus
-
Stripping list styling3m 35s
-
Clearing floats6m 12s
-
Styling links7m 16s
-
Creating rollovers5m 52s
-
Indicating current pages4m 43s
-
Controlling cursor states2m 46s
-
-
5. Dropdown Menus
-
Overview of dropdown menus1m 17s
-
Structuring submenus5m 56s
-
Styling submenus6m 4s
-
Creating submenu rollovers3m 28s
-
Positioning submenus5m 43s
-
Lab: Dropdown menus6m 51s
-
Solution: Dropdown menus8m 49s
-
-
6. Enhancing Navigation with CSS
-
Creating CSS-only buttons8m 39s
-
Overview of CSS sprites3m 30s
-
Using CSS sprites for icons14m 30s
-
Styling block-level links8m 38s
-
-
Conclusion
-
Additional resources6m 29s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Welcome