Join James Williamson for an in-depth discussion in this video Lab: Creating a vertical menu, part of CSS: Styling Navigation.
- View Offline
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.
- 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