Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Lab: Enhancing navigation with CSS

From: CSS: Styling Navigation

Video: Lab: Enhancing navigation with CSS

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.

Lab: Enhancing navigation with CSS

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 a moment, but I wanted to show you in the _assets directory of the 06_07 file, I have those Sprites that I was showing you a second ago, I have the Illustrator file in there, and if you don't have Illustrator, I also have the PDF files. So if you want to open those up and take a closer look at how those are created and how they're spaced, you can go ahead and do that as well.

All right, so the file you are going to be working on is in the 06_07 directory, it's under admissions, and it's the request.htm. You're also going to want to open up the main.css file which is found in the _css directory. So here I am in the main.css file, and here are our lab instructions, and let's just go through the steps. Step number one, Using what you learned earlier in the chapter, I want you to create a CSS button for the form submit button of the request.htm page, the one we were just looking at.

You've got two existing selectors that you are going to use to do this, both of them are this input type select, there is a default select and then there is hover one as well which you can use to target that button. I'm not going to give you any direction. I want you to use your own creativity, using effects like gradients, box shadows, borders, all those stuff that we've been learning up till now and even if you want to experiment with others like text shadow, go ahead. There are two resources I'm going to point you to, to help you with this, the gradient generator that we used earlier, use a link to that, and there's also a resource called CSS3 Generator. You can copy and paste that link into your browser right there, and with that one, if you want to do things like box shadow, it gives you a nice visual way to do that, and then you can copy and paste the code as well. So that's two really great tools.

All right, so the selectors that you're going to be targeting--I'm going to have to scroll all the way down to around line 766 or so--there they are. So we've got two empty selectors right here that are going to target that button for you, there's the submit, and there's the hover, so you want to create states for both of those on the buttons. All right, the next thing I want you to do is in the request file locate the connect section which is around line 173, and I want you to study the structure of that section. So if I go back in the source code, and I scroll down to about line 173 or so, here's the section of class connect info, and I'm really interested in having you study this unordered list, this menu right here.

It's got the four links which go to Twitter, Google+, Facebook, and LinkedIn. So they are just regular links. What you're going to do is you're going to take the selectors that target those, and you are going to use CSS Sprites in place of the text. Now if I go back over to the main.css, here are the instructions for that. So you are going to find the .connect li a selector that's going to target any link inside of a list item which is also inside that connect section. So it's very specific. It's about line 453 in our CSS. Now you are going to use that as a starting point.

You are also going to write a selector. So you are not going to use that selector, you are going to write new selectors that apply this social_sprites.png file, and you can find that in the _images directory. So make sure the path is a relative path from here, which is the CSS directory, to here which is the images directory, okay. So you want to use that file. Now all of the icons are 45 pixels by 45 pixels and they go in a specific order, Twitter, Google, Facebook, and LinkedIn. Just to give you an idea of what that looks like, I'm going to open this up in Illustrator for you.

So each of these is 45 pixels by 45 pixels, and they go in order. So we have Twitter, Google, Facebook, and then LinkedIn and then the hover states for those are below it. Now remember, if you want to go down, you use -Y values, if you want to go to the right, you use -X values. So it's very important when you're positioning those Sprites. And again, I give you a little bit of direction in that regards. There's no space between them, so the first icon is going to be at 0, 0, the second one is going to be 45 and 0, but remember you have to use negative values to move to the right, so keep that in mind.

Now after you've created the selectors that are going to display each icon, you then also need to create a hover selector for each one that's going to show the hover state. Remember, the hover icons are directly below the first set of icons, okay? So they're using the same X coordinates, but the Y coordinate is going to be 45 pixels down, and I just gave you a reminder that those files are over here in the _assets folder if you want to take a closer look at them. Okay, so that's it. Indeed, you are now on your own. But you know, have fun, have a great time building your button, use it as an exercise in creativity, really experiment with combining different properties together, see what you can build.

You know, also when you're working with your Sprites, don't forget to pay attention to whether you are going to need to use positive or negative values when positioning them. Usually if I'm trying to position the sprite, and it doesn't show up, it's typically because I've used either the positive or negative value when I needed to use the other one. When you're done, be sure to watch the Solutions movie where we'll go over my finished files.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 16703 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

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.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Styling Navigation.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.