Start learning with our library of video tutorials taught by experts. Get started
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.
Welcome back. I hope you got your dropdown menus functioning exactly the way that you wanted to. We are going to compare your finished code with mine, and I'll talk a little bit about how I styled the finished menus. And I know it seems like you had a lot to do here, but you probably only needed to write three or four selectors based on how you chose to do this. So as we go through this solution, be sure to compare your code with mine and kind of see which code you think might be more efficient. And trust me, it is not always going to be mine. Let's go through the lab steps again.
So the first thing that I asked you to do is find the dropdown menu styles and write a selector that's going to target the submenus. We wanted to turn floating off, set the background to that semitransparent white, determine how wide the submenu is going to be, and assign that value, set the height to auto, and then using positioning, start it at -9000 pixels off the page and 45 pixels from the top of the parent nav element. We also wanted to disable any margins. Let's go see how we did that. So I am going to scroll down all the way into my navigation, and I've got these dropdown menu styles right here, and here's how I targeted the submenu.
Now, one of the things that I did very differently here as opposed to our exercise earlier is I did use this page header selector, and one of the reasons I did that is, remember, you're having to overwrite some of the top level menu styles, and all of the top level menu styles are using that class attribute to write these selectors. So they're being very specific, so I needed to be very specific down here as well. So I'm saying, hey, anytime an unordered list has a class attributes of submenu, anytime you find that inside of the page header, let's do a couple of things. Number one, turn the float off, set the background color to that almost white value.
Now, I set the width at 800 pixels. How did I know how wide that needed to be? I really just used the width of the main navigational element. The RA logo to the left of this is 160 pixels wide, the page width itself is 960 pixels, that was pretty easy for me to determine that the width of this needed to be 800 pixels so that it would expand all the way across the bottom of the nav bar. I also went ahead and set the height to auto. I used absolute positioning. I positioned the top at 45 pixels, which is going to position it 45 pixels down from the top of the main menu item which already has positioning of relative applied to it.
So that's what the submenu is being positioned in relation to is the top level menu. So 45 pixels down. And then I set it left to -9000 pixels. And the last thing that, that particular step asked me to do is set the margin to 0, so that's what I did. So that was my first selector. Now, if I go back up to my steps, second step was to use the structure of the top level menu, write a selector that repositions the submenu to align with the nav element when the submenu's top level menu item is hovered over, and that actually required us to create one more selector.
If I scroll down in the selectors, if I keep going down, I can see right here I created a selector that wasn't there before. Now, if you bring that selector a little bit further down and just add them to the three that were already there, that's fine, I just like organizing them this way. So again, I'm saying, okay, go inside the page header, find the top level menu. When one of its list items is hovered over, look and see if it has an unordered list inside of it. If it does, target that unordered list and set its left value to 0. So that's gong to take it from the -9000 pixels that is its default starting point, it's going to move it over to the left of 0.
The 45 pixels for the top is going to persist because we are not overriding that so it positions itself exactly where we needed it to be. Next, we wanted to use opacity, and we wanted to fade in those submenus as they're triggered. I also wanted you to animate that. So we're going to use transitions. And if I go back to our initial dropdown menu styles, I notice that I had set the initial opacity to 0, and it will be totally transparent. And by the way, opacity works for the entire element and everything inside of it, which is why it's such a good choice here instead of using a transparent background color.
Then we use transitions, and I did all four of them there, the Mozilla, webkit, and Opera vendor prefixes, as well as the un-prefixed version. This time, instead of maximum height, we're animating opacity. I'm still doing it at half a second, and if you chose a faster or a slower time to animate it, that's fine, if you use the same one, that's fine as well. I also used ease in and out. That's typically what I do. I use the either ease-in or ease in and out just to make it look a little bit more natural of a movement. If you did a different type of easing or left easing off altogether, it will still work just fine.
So again, our opacity is at 0. We need to go down into the same selector that's triggering the positioning and set that opacity to 1 so that's what's going to animate that. Now I'm going to back up, and the fourth thing that I asked you to do was in the submenus actually change that rollover color from the orange color of this, the default link rollover, to a darker lavender or dark purple color. And again, if I scroll down into my styles, it's a selector that occurred at the very bottom. You did have to create a new selector for this, and I am being very specific here, I am saying, hey, go inside of the page header, find any unordered list with the class of submenu, and go inside that, and if you find a link inside of a list item, when that is hovered over, go ahead and change that color value.
Now, after you've finished all these steps, if you were to preview this in one of your browsers, your submenu should be animating in, and by clicking on one of the submenu pages, it should persist until you start browsing the rest of the nav. Now, that was the thing that I actually didn't ask you to do it on your own, but I asked you to take a look at the code and try to figure out how this is working. So essentially, you will notice we have up here very similar styles to what we did in the previous exercises when we were causing the top level hover to persist and the current page indicator to persist as well, but I needed more out of these submenus.
You'll notice that I created a very long group selector here that actually counts for a lot of different eventualities. The first one, it says, hey, if there is any list item with a class of current--and remember, for the current page that you're on--we not only applied the current class to the link, but we also applied it to the list item. So if you found that, go into the submenu and target that. We also said when somebody hovers over the nav--remember, the nav bar is the very top menu--so when somebody hovers over just that top menu item, if you're over a list item with current, and somebody is hovering over the submenu.
So I'm being very, very specific in dealing with two hovers. You're hovering over the nav bar, and you're hovering over the submenu. And I am also saying, okay, if you're hovering over the nav at top level menu, and you're hovering over a list item with the class of current, go ahead and take the submenu and make it visible. Those are all the instances where I want that submenu to be visible. The other thing that I needed to do was to hide the current menu if you started browsing the nav. So, right now that current submenu is going to persist any situation where it's active.
However, there is only one situation where I want it to deactivate, and that would be if you're on a page that does have a submenu, and you're hovering over that nav bar, but you're not over that particular item. So that's what this selector does. It says, hey, if you're hovering over the nav bar, find any submenu that's in a list item of current and then send that -9000. So all of these are essentially saying, hey, whenever I need it to persist, persist. However, if somebody hovers over that nav bar at the very top, go ahead and take the current submenu and hide it.
That results in it being current if you're not doing anything, if you're hovering over that specific menu item, or if you're hovering over any of its submenu items. But the moment you go up to the nav and you're not hovering over it, it sends it away, it allows you to browse but then it comes back whenever you're either hovering over it or not hovering over the nav bar. I have one last thing for you that's a little extra credit work, if you will. I am just going to browse to this campus page to show you what I am talking about here. You see how that campus portal breaks down to the next line? It's the result of the fact that it has longer menu items or maybe even more menu items.
It doesn't look horrible, but it's not really as neat or as organized as some of the other submenus that we were working with. It's conceivable that an organization like a university, if you're working on a website, they might have a lot of submenus, a really sizable submenu area. So my challenge to you, if you want to do it is to restyle the submenus so that those multiple lines of length can display in a little bit more of an orderly fashion. Now, if you want, you could take some cues from the way that I went ahead and did the footer down there, or you can come up with an entirely new way to display them, it's totally up to you.
That's the great thing about designing something from scratch, how you do it is entirely up to you.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.