Join James Williamson for an in-depth discussion in this video Lab: Enhancing navigation with CSS, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
In our final lab, we are going to enhance our Roux Academy site by adding a pure CSS…button and utilizing CSS Sprites.…So let's take a look at what we're going to be building.…All right, so the first thing that you are going to be doing is working on a button, and…here I am on the Information Request form. This is the page you are going to be working on.…Down at the bottom where you have Submit button-- and I want you to style that anyway that you…want to make a pure CSS button out of that-- I'll go into the particulars in just a moment.…And then the next thing you're going to be doing is we have this little section over…here that says Connect with us that has some of the social media icons on it.…
If you hover over those, you can see that they have a hover state on them as well, and…those are all one single image. So they are Sprite image that you can work with.…So we are going to be using CSS Sprites and CSS only buttons in this particular lab.…Now I'm going to switch over to my code editor, and we are going to go to the steps in just…
- 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.