Viewers: in countries Watching now:
Join Joseph Lowery in Site Navigation with CSS in Dreamweaver as he explores current design trends in site navigation and shows designers and developers how to create robust CSS-based navigation. The course shows how to convert HTML lists to graphical controls that integrate seamlessly with an existing site design, and how to build menus with a wide range of navigation options, all in standards-compliant CSS. Exercise files accompany the course.
Spry vertical menus work exactly the same as their horizontal siblings, except they're on their side. So let's take a look at a design where Spry vertical menus fit the bill perfectly, and I'll show you some more styling techniques along the way. First, we'll take a look at the finished product. So here you see my navigation over on the left--I'll move down so you see all five items. And as I roll over each of them, the text changes color, but also the background graphic changes color. This is using a method that involves sprites, which is covered in the "Navigation Techniques" chapter.
Now when I move up to my menu item that has a submenu, as indicated by the ellipsis, you can see the submenu up here is to the right with a different background, no background graphics, and the same orange hover color. Okay. So that's where we're going. Let's get started. I am going to go ahead and close out this menu, and here as our starting point is the mission.htm file, which is located in the under Exercise File/Chapter 2/02_03. Now you can see that I don't have any navigation here over on the left, and if I go into Split View, in fact I have an open nav tag.
Now this is an HTML 5 tag, which is using the new nav tag, and I wanted to do that in order to show you that Spry menus work just as well on HTML5 pages as on previous versions. All right, our cursor is placed just were we want it to be. Let's go over to the Insert panel and in the Spry category, we will select Spry Menu Bar. Dreamweaver asked if we'd like to have either a horizontal or vertical menu. In this case, we want a vertical, so I'll choose that and click OK.
And there is our placeholder menu. Let me open up the Properties Inspector, and you can see, with the Spry Menu Bar tab selected, I have a Custom Property Inspector that shows off all the various items and submenus. So our first task is to go ahead and customize the labels of the various menus and make sure they're working exactly right for us. Now, I can do that right from the Property Inspector. So here is my first item, which I'm going to change from Item 1 to Tours and add that ellipsis.
Now you can go ahead and choose one after another. I'll do the second one this way, Mission, and you can also go ahead and select it, if you're in Design view, right from the screen there, and we'll change Item 3 to Contact, and Item 4 will be Resources. And I'm going to need to add another item, Explores. So in order to do that, the easiest way is to go up and click on the Spry menu bar, select Resources down there, and then click Add menu item, and that will come in as untitled item which I can change right here in the text field. Okay.
Obviously, you would go ahead and set up all your various links here. I'm not going to takes the time to do that, but you can keep the hash marks for testing and later replace those with your actual links. Now, we also have to deal with the submenu items. The first one that I want to work with is the one Contact. Now Spry puts one in the third item by default, and I want to get rid of that. So, I'll select my Spry menu bar, choose Contact, and then I'm just going to choose the last submenu item, and then select Remove menu item.
I choose the last one because I know the way that Dreamweaver works here is that it will move up the list, so I'm go ahead and choose that one. Now watch what happens with item 3.1, which has other subitems. When I click the Remove button, Dreamweaver pops open a dialog and asks, are you sure you want to delete this, because it does have some sub navigation or children? In this case we do, so I click OK, and what that does is it not only removes all of the unordered list items, but it also remove a class that Dreamweaver uses called MenuBarItemSubmenu whenever there is a submenu item, and that's how Dreamweaver knows to display this right triangle that we see here.
So now let's move on to our Tours section, and here you can see it's item 1.1, item 1.2, or item 1.3. Now just to show you that you can still of course work in code, I'm going to go ahead and change these directly in Code view and make this Northern California. Item 2, we'll make Central California, and Item 3, Southern California.
So we have all different regions of California covered. And when I switch back to here and then go into a Live view, I now have all of my correct labels in place for my navigation, both top level and for the sub navigation, but we've got quite a bit of styling to do. Luckily, that can easily be done with Dreamweaver and CSS.
There are currently no FAQs about Site Navigation with CSS in Dreamweaver.
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.