Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Using icons
- Navigating with Spry widgets
- Styling Spry menus
- Working with background images
- Implementing sprites
- Designing navigation with accessibility in mind
- Adding drop-down menus
- Developing graphical navigation with jQuery
- Creating pop-out vertical navigation
- Exploring CSS3 and HTML5 enhancements
Skill Level Intermediate
They roll into view, and the other ones are slightly hidden but still accessible. So if I want to choose one from the middle and then roll off, everything is animated from left to right, complete with some very nice kind of easing that you'll see here with the animations. This is hours of fun to play with. Let me tell you. So let's go ahead and start with the index.htm file. And as you can see, we have to start with--surprise, surprise--an unordered lists for the navigation. Now each of these items as I go to Split view, you can see has its own id, homenav, eventsnav, companynav, and so on.
So I've taken the liberty of going ahead and creating a blank CSS file for us and already linked it, and let's start by building out the CSS. First, we are going to go ahead and tackle the nav div itself, and for that we'll start by putting in the width of 630 pixels and we want to make sure that we keep everything within the width, so I am going to add an overflow property here and then hide that and zero out the margins.
I'll just close off the rule here. Now, let's move on to the UL, or unordered list, tag within the nav div, and as we've done previously in the course, we're going to get rid of the bullets by going to list-style and setting that property to none. Now we need to make a margin adjustment for the unordered list, and I am going to set that 0 0 0, which sets everything to zero except for the left, which I'll set at -40 pixels.
Finally, I'm going to set the width to the UL element to a whopping 1,600 pixels wide. This is the width of all of the pictures which are each 320 pixels times five, which is necessary to contain it. Now because we have overflow hidden up here, you won't see those elements. So let me close out the nav ul rule. And the next thing to do is address the list item, and all we are going to have to do with that one is just float it to the left-- again, because we want our list items to appear in a horizontal fashion.
So, we'll do nav ul li, and I'll set the float property to the left and close that rule. Next, we'll work with the anchor tag, and as usual, it's doing much of the heavy lifting. In addition to hiding the text links, this rule will also set the width for the closed panels. So I'll go ahead and write out the selector, nav ul li a, and do my open and closing curly brace here. I mentioned that I was going to hide the text links, and I'll do that by using a text-indent property set to a -2,000 pixels.
Now, let's go ahead and set up the background, and I am going to set that to white with no image, and I can finish off this declaration with a semicolon. Next, I want to add a border separating each of the images, so I am going to choose a border right and set that two pixels wide, make it solid, and we'll use a white color there. Next, I am going to add in a cursor specifier for Internet Explorer so that it doesn't have to worry about what kind of cursor to use.
Again, with the anchor tag, as we often do, we'll put in a display block to increase the size of the hit area. Now we'll set the width, and this will be the width of each of the images when they are closed. So that's going to be 78 pixels, and the height is consistent throughout, and that's 200 pixels. So now if I switch over to Design view, drop out of Live view here, you can see the shape beginning to take form, and now it's time to bring in the images.
So go back to nav.css and create the first one, which is going to be nav ul li, and we are going to target the first list item, which is home. And if you recall, that ID was homenav, and we're looking exactly at the anchor tag that's in that list item, and we want to bring in the background URL. And you want to make sure that you're in the exercise files Chapter 07 folder, in the 07_01, and drill down to the images folder, and here you'll see a series of images, each starting with the initials dw.
We are looking for dw_home.jpg, click on Choose, and we want this to repeat with a special value of scroll set to 0%. So now this rule is essentially the same one that we are going to use for all of the pictures. So I am going to go ahead and copy that, paste it, and let's go ahead and update the selector first, which is events. And the name of the picture is also dw_events, and then we'll paste in another copy and change the selector to company and the picture name to dw_company.
The fourth one is gallery, and the final one is booking. Now, we do need to add one more property to this final one in order for that to be the image that is remaining open, and we want to give that a minimum width property of 320 pixels. So now let's take a look at how it's working in Live view.
Easing is an animation term that makes movement seem more natural. Here is the open script tag, and this is a very common thing that you'll see in jQuery where it is the functionality that says 'wait till the document is ready and fully loaded and then begin doing your functions'. As you can see, there are a series of functions that are geared to the hover state, and once something is being animated, classes are added and animations are begun and the time for the animation is set and the type of easing is established.