Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> Up until this point, our example site has had nothing in the side bar except for the hidden section navigation heading. Let's add that section navigation menu now. We'll once again use a list and style it using CSS to appear like any other vertical menu. Let's continue working on the same page, visitors.html, in Dreamweaver. If you're using the exercise files, this page is saved in the 05_03 folder of the chapter five exercise files. We also need to open the file sectionnav.doc from the chapter five exercise files folder.
Go to that Word document now. This is the list of links that we're going to add to our vertical menu. Select all of the content in the page. Hit control C or command C to copy the text. Go back to Dreamweaver and open visitors.html page. Click inside the side bar DIV, which is outlined with a dotted line, then hit control V or command V to paste in the list. Let's go into code view to make sure the list pasted properly.
Click on the code button in the document tool bar. Scroll up so that you can see the entire HTML. Again, we have an unordered list with a series of list items. Once again, an extra UL element has been pasted in, so just delete this line. While we're in code view it would also be good to add in an extra DIV that wraps around both the section navigation heading and the list below it to make sure that they always stay grouped together in case we later add more content into this side bar below the section navigation.
Place your cursor before the opening H2 tag and hit enter or return to create a new line, type an opening
We need to create the links on each of these items. Highlight over history of Wardscott. In the link field of the properties inspector, type history.html. Highlight over where to stay and for the link type stay.html. Highlight over what to do and see and for the link type see.html. Highlight over where to eat and drink and for the link type eat.html.
Highlight over how to get here and for the link type gethere.html. Finally, highlight over visitor's bureau and for the link type bureau. Now we can begin adding styles to the div, the list and the links. Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected for the selector type. Clear out the default text in the selector field and type #sectionNAV.
Leave this document only selected for the define in option and click okay. First let's set the margin and padding of this DIV. Click on the box category. Under padding uncheck the same for all box. In the top field enter 20, in the right enter zero, in the bottom field enter 14 and in the left enter zero. Leave pixels set as the unit of measurement for all of these fields.
Uncheck the same for all box under margin as well. In margin's fields enter zero in the top field, fifteen in the right field, zero in the bottom field and fifteen in the left field. The margin gives us space around the DIV on each side. The passing gives use space inside the DIV. Now click on the background category. Click inside the background color field and type #EEF0E3.
We're also going to set a background image so click on the browse button beside the background image field. In the select image source dialogue box, browse to the location of the chapter five exercise files on your computer, click on the 05_03 folder then on the images folder, select the sectionNAV_bg image and click okay. Back in the CSS rule definition dialogue box, choose repeat X from the Repeat menu. In the Vertical Position menu, choose bottom.
Now click okay. We now have a block for our section navigation menu. In order to make this menu appear as if it's coming directly out of the bottom of the mainNAV bar, let's remove the top padding that is currently set on the side bar DIV. In the CSS styles panel, scroll up in the all rules pane, select the sidebar one rule. In its properties, shown below, click on the padding declaration, then click on the trash can item at the bottom of the panel to remove all of the padding.
Now the section navigation DIV is starting directly at the top of the sidebar. Let's continue styling the list and the links. Click on the new CSS rule button at the bottom of the CSS styles panel. Keep advanced selected as the selector type. Clear out the default text in the selector field and enter #sectionNAV UL. Click okay. Click on the box category in the CSS rule definition dialogue box.
Leave both of the same for all checkboxes checked and enter zero for both the top fields. We're just removing the default list spacing. Click okay. Next, click on the new CSS rule button at the bottom of the CSS styles panel again. Leave the advanced selector type chosen and in the selector field, clear out the default text and type #sectionNAV LI. Click okay.
Go to the box category, again leave the same for all checkboxes checked under both margin and heading and enter zero in both top fields for margin and heading. Next, click on the background category. You want to remove the default background image of the flower bullet from this particular list. So click inside the background image field and type none. This will override the previous style and get rid of that image from this list. Finally, click on the border category.
Uncheck all of the three same for all checkboxes. In the bottom field under style, select the menu and choose solid. In the bottom field under width, enter one and leave pixels selected as the unit of measurement. And in the bottom field under color, type #D5DDDD. Now click okay. Next, let's add a style for the links themselves.
Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type. Clear out the default text in the selector field and enter #sectionNAV A. Click okay. As with our horizontal menu that we made earlier, we want the full area of each link to be clickable, not just its text. So click on the block category, in the Display menu click the arrow and scroll down to select block as the option.
Now let's add some spacing between the links. Click on the box category. Uncheck the same for all box under padding. For top enter 4, for right, 10, for bottom 2, and for left 16. Leave pixels selected as the unit of measurement for all of these fields. Finally, click back on the type category. In the color box type #257483.
Then check the none box under decoration. Now click okay. Our last step will be to add rollover effects as we did with the horizontal navigation bar. Click the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type and clear out the text within the selector field. Type #sectionNAV A:hover, #sectionNAV A:focus, #sectionNAV A:active. As we talked about earlier, this makes the rollover effect work for both mouse users and keyboard users.
Leave this document only selected and click okay. This time, instead of changing the background color for the rollover, we'll change the text color. Click in the color field and type #272910. Now click okay. Let's preview the page in a browser to see how it will work.
Click on the globe icon in the document tool bar and choose preview in Firefox. When asked to save the changes to the page, click yes. Try moving your mouse over the items in the left navigation menu. You can see the color change, but let's also try tabbing to them. First we're going to have to tab through all of the links in the main navigation bar.
So hit tab on your keyboard until you move to the first link in the section navigation menu. You'll see a dotted outline around the first link and the text color will change. If you continue to hit tab, you'll move through each of these links in order. Close Firefox and lets again check this page in Internet Explorer. Click on the globe icon in document tool bar and choose preview in IExplore. This time there are not problems with the menu in Internet Explorer.
It looks and works the same as it did in Firefox. So we've learned how to style a list to look both like a horizontal NAV bar and a vertical menu. We've been using lists in this way because they're the correct semantic markup for a series of links and provide additional structure to help screen reader users skip sections of the page they aren't interested in. Another important tool to help screen reader users get to the content they want quickly is the skip navigation link. We'll talk about that next.
Get unlimited access to all courses for just $25/month.Become a member
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.