Join James Williamson for an in-depth discussion in this video Lab: Creating horizontal menus, part of CSS: Styling Navigation.
Welcome to our horizontal menus lab.…This lab is going to be just a little bit different from the last one in the record…that I'm going to give you a few parameters for our site's menu, but it's going to be…up to you to decide exactly how you want to style it.…So I have two files that we are going to be working on in our lab opened up here.…I have got the index.htm and the main.css opened up.…You can find these in the 04_09 directory, and I want to point out that the main.css…is found in this _css submenu.…
So those are the two files that you are going to be working with.…Now the instructions for this lab are at the very top of the main.css file.…I am going to go through the steps for the instructions, and as I go through some of…these individual ones, I am going to preview the finished version of the site menu so you…can see what your target styling goal is.…So the very first thing you want to do is browse through the structure of the HTML code,…find a nav element with the ID pageNav, and really carefully look at that structures.…
- 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.