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

Lab: Creating a vertical menu

From: CSS: Styling Navigation

Video: Lab: Creating a vertical menu

So now it's time to test out your skills and build a vertical menu in our Lab exercise. I'm going to up the complexity level a little bit here, though, where our chapter exercises featured a single menu on a simple page. Real world web design is rarely that simple. Within larger sites, you have to build items like vertical menus while focusing on writing efficient styles, and ensuring that all of the page elements work together to create the finished layout. To reflect those challenges, I've structured this lab so that not only are you building a vertical menu, but you're having to weave it into an existing structure of a site as well, and that sometimes is a bigger challenge than just creating the menu.

Lab: Creating a vertical menu

So now it's time to test out your skills and build a vertical menu in our Lab exercise. I'm going to up the complexity level a little bit here, though, where our chapter exercises featured a single menu on a simple page. Real world web design is rarely that simple. Within larger sites, you have to build items like vertical menus while focusing on writing efficient styles, and ensuring that all of the page elements work together to create the finished layout. To reflect those challenges, I've structured this lab so that not only are you building a vertical menu, but you're having to weave it into an existing structure of a site as well, and that sometimes is a bigger challenge than just creating the menu.

So, I want to show you the finished version of this exercise before we get into the steps for it, just so you can understand what it is that we're building and how it relates to the rest of the content on the page. So, this is the homepage for the Roux Academy Art, Media, Design School, and I'm just going to scroll down. And right down here in this last little section we have a little section called Find out more, and we have a Vertical menu here where we have these different elements, and you can see the rollover is creating a diagonal pattern behind it. We have an orange color for the text itself, so a nice little rollover there, nice little menu.

We're creating a beveled effect between the menu items as separation by using both a top and a bottom border, and just using a slightly darker blue, and a slightly lighter blue than the color of the background, and it creates illusion of those bevels. So, all in all, nothing really challenging based on what you've done in the previous exercises in the chapter. I'm sure most of you are looking at this right now and sort of doing the math and saying, okay, I can see what he has done there. I can see this, so we've got a little bit of spacing, we've got some borders. Okay, I can go do that. But here is the problem.

This is within a much larger site, obviously, and you want to write very efficient styles. And to do that, you want to offload as much repetitive work as you can in what I like to refer to as global styles. So, you'll notice that this is not the only little section like this. We have this one, we have the Connect with us, we have an Alumni profile there, we have a Coming Events notice, it has a list in it as well, we have a Current Show, we have a Student Spotlight. So, these little sections are called info sections, and there's a lot of code that deals with them just in terms of generalities, the things that they have in common like the headers and the text inside of them, and lists and links and things like that.

So, there's some of that code that is already existing and some of it we're going to have to modify. There is some code that's general for the entire site, global formatting for paragraphs, and lists and headings and things like that. We have to take all of that styling into account. So, our lab is going to be not just creating the menu, but making sure that all of the code is going in the right place and not overwriting the things that are already there. All right, so I'm going to switch over to my code editor, and I will probably come back to this from time to time just to kind of illustrate what it is that we're going to be working on.

Now, the first thing I want you to do is open up the index.htm file which can be found in the 03_09 directory. Now, I want you to scroll down into the code, and I want you to go down to about line 78 or so. This is the section that we're going to be styling. There are few things that you need to know about it. Notice that it is inside of a section tag, not a div tag, and it has two class attributes, it has a class attribute of find, and it has a class attribute of info.

Now, the class attribute of info is used over and over. You'll notice each one of those smaller sections has the class of info. But then it's further identified by the unique class of find. After that, it's just your basic link structure. We have heading 2 to identify the content, and then we have an unordered list which is serving as our menu. So, familiarize yourself a little bit with the structure of the HTML, familiarize yourself with this section in particular because you were going to be tasked with writing selectors to target these elements, and you want to make sure you are writing efficient selectors when you do that.

After you're done with that, switch over and open up the main.css file which you can also find in the 03_09/_css directory. Okay, so you want to open up that one as well. At the very top of that, I have some Lab Instructions, and I'm going to go through these lab instructions step by step in just a moment. But I want to show you the three areas of the code that you're going to be working in just so you kind of find your away around pretty easily. Because I find when I'm working on other people's files, files that I didn't create, they don't necessarily organize them the same way that I would organize them, so it's very hard to find your way around.

So, I want to give you a little bit of an introduction in terms of how the code is structured. So at the very top of the code after the font-face declarations, you're going to find global styles. It's there that you'll find a CSS reset, and you're going to need to work on this reset a little bit. You'll also find Global Element Selectors, Global classes, things like that. You may recognize from earlier we have the Clearfix by Nicholas Gallagher here as well. We used that in one of our earlier exercises. And then as I scroll down, we then start getting into page specific things like layout styles, page specific regions, things like that.

You're going to be working in two sections in particular. The first one, about on line 351 or so, we have a grouping of styles for all of the individual info sections, and I've created a little comment that says section info link styles go here. So when you're crafting styles that are going to affect all of the info sections, you're going to write them there. Now, I'm also going to task you to write some selectors that are specific to that one area that we're creating the menu in. And you'll find its code around line 433 or so, right there you will see find section menu styles, and that's the find section.

That's where you're going to put the code for that. So you now have some idea of how the CSS is structured, and as we go through the steps in just a moment, you'll know where you need to go down and start adding code. All right, I'm going to scroll all the way back up until I get back to my lab instructions, and I'm just going to go through these instructions one by one. Feel free to read through all of this. It sort of explains in a little bit more detail what I'm wanting you to do and what the emphasis of these exercises are. Okay, so step number one is to set global link styling.

You want to go down to that section where we have our global styles, and you want to find the CSS reset that I've created down there. In the CSS reset, you want to add to it the ul and li elements to that reset, and doing that is going to eliminate all of the default margin and paddings from any list all the way throughout the website. Next, you want to jump down to that Info section styles that I just showed you. Remember, that's on about line 351 or so. In that section, you need to write a selector that's going to target unordered lists in those info sections.

So, you're looking at targeting all of those info sections, not just the one with the menu that we're creating. In that selector, you want to add properties that are going to strip out the default list styling, and then you want to set the margin of those lists to 1 em for top, 1.2 ems for the right and left, and 1 em for the bottom. So as you can see, you're not really having a lot of creative freedom when you're creating the styles for this vertical menu, and that's because the visual design for the site has already really been created.

So what this exercise is more about is understanding how these styles can be written efficiently so that you're affecting the widest area possible with the smallest amount of styles. Now, below that one, you're going to want to write a selector that's going to target all of the list items inside all of the info sections. In that particular selector, you want to set the bottom-margin of the list items to 0.8 ems, and you want to set the font-size to slightly smaller than the default font-size, and the value you're going to use is 0.9 ems.

Next, you want to go just below that and write another selector that's going to set all the links inside all the info section list items. Now, pay close attention to that. Any link that is inside a list item that is inside an info section, you want those links to display as block-level elements. So that's all you're really going to be doing with the generic info sections. Next, you're going to move down, and you're going to target that specific find section so that find out more section, and you're now targeting it specifically.

So you're going to scroll down and locate those styles. Remember, they are on about line 433 or so. When you're writing selectors for this section, this is critically important. Make sure that they target the elements within that find section only. So you want to be very careful about how you write those, so they are only targeting that one unique section. So, the first selector you're going to write is one that's actually going to overwrite the default margins on unordered lists, and you want to change the right, left, and bottom margins to 0.6 ems, and you want to leave the top margin at 1 em.

So this is a very common practice. There are a lot of times when you're going to write a global selector that's going to go out and apply formatting liberally across the entire site. But then in those individual sections, you're going to go in and tweak those values a little bit for specific sections, and we're going to need to do that for our vertical menu. Now, next you want to write a selector that's going to set the margin of all the list items to 0. And that's going to cause all of our vertical menu items to rest immediately on top of each other and have no space between them.

Within that same selector, you then need to create visual separation between those items by applying a 1-pixel solid border to both the top and bottom of the list items. Now, the top border is going to have a darker blue color, and it's the first color right here, it's this RGB value. Then the bottom-border is going to be a lighter blue and here's the RGB value for that. That's going to create that beveled effect that we were seeing earlier for the dividers. All right, next you want to write selectors that are going to remove the top border from the first menu item and then the bottom border from the last menu item.

Remember, the very last exercise in this chapter was restricting exactly where styles were applied. We want these bevels to be dividers between the items. That means we don't need the borders above and below them, so you're going to write selectors that eliminate that. Next, you're going to create a selector that gives 0.6 ems worth of padding to all of the links within that menu and that menu only. So you want 0.6 ems of padding all the way around that's going to create a little interior spacing for each of the menu items. Then finally, we're going to write a selector that creates rollover for our menu items.

You want to set the color of the links to orange. It says RGB color right here, and then you want to apply a background image with the URL that I provided you here. So, you're going to set a background property, but instead of doing color which is what we've been doing in the past, this time, you're going to use an image. Now, once you're finished, and as you're working with this, I know I've given you a lot of steps here, there is a lot to this one, but I really want you to write all the styles that affect this particular menu. And you'll notice that in the course of doing a larger site like this, a lot of times the styles that affect a particular item are going to be located in different sections of the code.

So, it's a very important workflow that you'll need to understand as you're building these menus within your larger sites. So there you go, have fun with this lab. As you're working on it, if you get stuck or if you get frustrated, don't hesitate to check out the finished files, compare your code to the code that I have in there and see kind of where your styles are compared to mine. And be sure to also watch the lab solution movie where I go over all of the finished code and all the steps here in a step-by-step fashion.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 18186 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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.