New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Styling Navigation
Illustration by

Solution: Creating horizontal menus


From:

CSS: Styling Navigation

with James Williamson

Video: Solution: Creating horizontal menus

Welcome back. I hope you had fun experimenting with our main site navigation, and I'm hoping most of you played around with creating your own version of the menu bar. Let's take a look at the finished files and go over how I styled the menu based on the parameters that I gave you in the lab. Now, in this case, I really don't expect your code to match mine. Just examine the reasons why I style the menu the way that I did and compare it with your own reasoning. Again, I have the main.css file open and the index.htm file open.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Styling Navigation
5h 14m Beginner Nov 16, 2012

Viewers: in countries Watching now:

Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.

Topics include:
  • 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
Subjects:
Developer Web Web Design Web Development
Software:
CSS
Author:
James Williamson

Solution: Creating horizontal menus

Welcome back. I hope you had fun experimenting with our main site navigation, and I'm hoping most of you played around with creating your own version of the menu bar. Let's take a look at the finished files and go over how I styled the menu based on the parameters that I gave you in the lab. Now, in this case, I really don't expect your code to match mine. Just examine the reasons why I style the menu the way that I did and compare it with your own reasoning. Again, I have the main.css file open and the index.htm file open.

Now these are coming from the 04_09 > finished_files folder, and remember the CSS is actually inside the _css folder. I also have campus_portal open just to kind of show you how I am applying that class. You certainly don't need to have that open. I just have it open so I can point out the class application for the indication of the current page. The first thing that I had to tackle was making the menu appear just to the right of the RA logo and stretch for the remainder of the layout, just as you're seeing right here.

In order to do that, I targeted the nav element. It's a natural place to start. I did that by floating it to the left, and I gave it a width of 800 pixels. Now the reason that I gave it a width of 800 pixels is the body is set to be 960 pixels wide and the RA logo is 160 pixels wide, that leaves me 800 pixels left. So I went ahead and took it. Now, if I had said 100%, and some of you may have done that, it would have stretched a little bit further because it would've tried to take 100% of its parent element which would have been the body, which would've calculated out to 960 pixels, and that would have broken the layout.

So I couldn't use 100% there. I went ahead and used pixel decorations. And you are going to see that I used pixels throughout this particular layout. I don't normally do fixed layouts, but since this one is a fixed layout, I'm using pixels instead of ems. If you chose to use relative unit of measurement like an em, there is nothing wrong with you doing that as long as you got the results that you are looking for. A problem that you may have run into is you may have experienced some of the other elements shifting around or changing once you floated the nav element.

Look at the source code. If I scroll down, I went ahead and applied to the nav element the class of cf to go ahead and clear that nav element and not affect the elements that come after it in normal document flow. So hopefully, you remembered that from the previous chapter. If you didn't, it's a very easy fix. Just go ahead and apply that class. The clearfix is built into the styles already, it's right here. So we don't really need to worry with that. All we need to do is apply the class.

The second thing that I wanted you to do is set the background color of the menu to sort of that darker, almost black color with a transparency applied to it. Again, I did that right here in the same selector. And I just used the value that was given in the lab instructions. If you change that up a little bit, and you wanted to change the styling, there is absolutely nothing wrong with that. If you're happy with the way that that turned out, then that's perfect. If you use this value, too, that's fine. The next thing that I asked you to do is go ahead and space those menus out evenly, so they take up the majority of the available space.

And I accomplished that a couple of different ways, the main way was in the page header li, so targeting the list items themselves. Notice that they are floated, and that's going to help me display the menu horizontally, obviously. But I went ahead and gave it a margin-right of 24 pixels so that's going to space them out, and I'd love to tell you that I had some secret formula that allowed me arrive at that 24 pixels. But honestly, I just kind of experimented with it until they were taking up enough of the menu, and I felt like I had enough space between them, but where they weren't spaced too far out.

It goes without saying that you are creating a horizontal menu, so there were a few things that hopefully you kind of took care of on your own, one of those would be floating the list items to the left. Now if you chose to use the display inline method, that's viable, you certainly could have done that, but obviously you were going to have to go a little bit different in the way that you handled all of the styling on the list items and the links if you went that route. I have also set list-style type to none on the unordered list. Those are just some minor things that I had to go ahead and take care of right off the bat.

For the menu itself, I went ahead and gave it a height of 40 pixels, and then I gave it a little bit of padding up top of 5 pixels. Now the reason I did that I just like the way the height looks in relation to the text at 40 pixels. I gave it a little bit of extra 5-pixels worth of padding up top, just in case some of the menu got cut off at the very top of the page, so just to give my menu a little bit of extra space coming down. Now in terms of the styling of the links themselves, the next parameter you were given was to use white text and sort of an orange color for the rollover color.

So I have got two selectors that are handling that for me, one is targeting the links themselves inside the list items, and the other one of course is the hover pseudo-class selector. Inside the link one, I just chose a color of white, and inside the hover I just chose the color property and applied that orange color to it. Again, if you chose different values, there is nothing wrong with that. I also wanted to make all the links text lowercase. So to do that, inside the link selector, I use the text transform of lowercase. I also wanted the text to be slightly smaller than the default text size, and that's why I am using a font size of 0.9 ems.

I want the text to center vertically within the menu, so I use the exact same line-height, which is 40 pixels as I used for the height of the nav bar. Now I know I have got a little extra 5 pixels worth of padding up top. But you will notice when I preview this in the browser, it really doesn't look awkward. The reason I like giving a little bit of extra space when I am butting up a menu up at the very top is that those tend to look actually more narrow than they are. And if you didn't, that's fine, there is nothing wrong with that. If you're happy with the results, that's all that really matters.

Now I also wanted to add a little bit of padding to the links themselves, and I really left that up to your discretion. You'll notice that for padding, I didn't do any padding top or bottom. Remember, I've got my line-height that's controlling the placing of the text vertically, but then right and left I did 20 pixels worth of padding. So it's interesting, you have got 20 pixels on either side, and then you also have a margin right of 24 pixels that's spacing them out. For our rollovers, the only other thing I really wanted to do is make sure that that default sort of diagonal graphics pattern wasn't showing up on our rollover.

So I just went ahead and applied a background of none, which would turn that off. Now finally, I wanted to indicate the current page, so I created one selector down at the bottom that's targeting not only any link with the class current, so I just went ahead and used the same class name that I used for the chapter, which was current. But I also applied it to the hover as well, so it wouldn't change states if somebody hovered over it. I used a background color that was almost white with 40% opacity, I changed the color of the text to black, I set a border-radius on top of 5 pixels for the top-left and right corner, that's going to give me that sort of tabbed look that I was going for there, and then I changed the cursor to display the default.

In order to make this work, I had to remember to go into each of the individual pages and modify the menu so that that particular link would have the class of current applied to it as well. So if you skipped that step, writing those selectors really wasn't going to help you. With all that being said and done, when I open up page within the browser, I get a very simple rollover. And then when I click on links, I get the current page indicator using that current class. If you couldn't quite get it to work just concentrate on the properties or the values that are causing it to fail or the properties that you have left out based on the code that I just showed you.

Now even though creating menus is relatively simple, integrating them within the structure of a larger site is not. So don't get frustrated if it didn't work the first time you tried it. Just keep focusing on what makes the menus work and keep experimenting with building your own.

There are currently no FAQs about CSS: Styling Navigation.

 
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.
Upgrade now


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 Upgrade now

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

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.