Join James Williamson for an in-depth discussion in this video Stripping default list styling, part of CSS: Styling Navigation.
In this chapter, we'll explore creating our first menu.…We'll start with vertical menus, as they require the least amount of formatting and they're…a great place to start when learning how to style menus for the first time.…To give you an idea of what we're going to be building, here's our finished vertical menu.…We have nice, evenly-spaced menu items that respond to mouse-overs or user focus.…Like most menus, our vertical menu is simply an unordered list of links.…Before we can actually concentrate on the menu styling itself, we'll need to strip out…the browser's default list styling.…
And to do that, we're going to start with the vertical.htm file found in the 03_01 directory.…And if I scroll down, I can see the actual structure of our menu.…So we've got a very simple menu here just an unordered list.…Notice that we're not using any IDs or classes to identify that, we don't have this wrapped…with a div tag or with a nav element. It's just a simple unordered list.…Within the confines of an actual site, you're probably going to want to do something to…
- 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.