Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Spry accordion panels are a cool way to hide and reveal content on demand, complete with built-in animation. In this video, I'll be begin to show you how to extend the coolness of accordion panels to your site-wide navigation. Before we start, let's take a look at the final product. Here I have index.html open from the final folder, and you can see my navigation elements over here on the left in the vertical navigation. If I go over and roll over any of them, I get a little hover color action, and when I click on any of the ones that have subnavigation, the accordion panel expands, and I see my various elements in there.
If I click on another one, it works as it normally does with accordion panels, where one panel closes and another one opens. And again, I have my subnavigation available to me. Clicking on the final one, we'll close them all and take me to whatever page is linked to it. Okay, so let's get started. And now I have index.html opened from my Chapter 2 exercise files. We're going to make this a vertical navigation, so it's going in the side here. I'll go to Split view, and we're looking for div id = "sideWrapper", line 93, and put your cursor in between the opening and closing div, and then head on over to the Insert panel, choose the Spry category if you haven't already, and go down towards the bottom, and you'll find Spry Accordion.
Click that once to insert it, and you'll see that Dreamweaver has put in two accordion panels. Since we are in Live view, we can go ahead and examine how they work, so I'll roll over them and you'll see that slight roll-over color change, and I click on the second one and it rolls up. Click on the first one and the second one rolls down, just as you would expect. So let's drop out of Live view and I'll open up the Properties Inspector and click on the Spry accordion panel here. And the first thing we need to do is add a couple of additional panels so that we can take care of our additional menu items.
So in the Accordion Property Inspector I'll go down and select Label 2 and then click Add Panel twice, and now we're ready to change our labels. I'm just going to go up in Design view and select Label 1, and we'll make this Home. Label 2 I'm going to turn into About with an ellipsis because this has some subnavigation. So dot, dot, dot there. Label 3 is Process--again, with some subnavigation.
And finally, Label 4 is Contact Us. Now all of these need to be turned into links, so I can just go up and double-click on Home and then in the Property Inspector, type in index.html, and press Tab to lock that in. Now on About, I'll go ahead and select it, and then in the Link field, we're not actually going to a separate About page. This is just being used to open up the subnavigation, so I'll just put in a hash mark here.
Same deal with the Process, where I'll select that and put in a hash mark. Contact Us on the other hand, will be going to its own page, so we'll type in 'contact.html'. Now we're ready to go ahead and put in the subnavigation, so we'll take advantage of Dreamweaver's ability to show different Spry content by choosing the eye icon here. So now we have Content 2. I'm going to select that. We're actually going to use Bulleted List inside of this as the starting point for our navigation. So I'll change this to Unordered List, and Content 2, I'll change it to Our Oil.
The second entry is the Land, and the final entry is Company. Again, we want these all to be links, so I'm going to go ahead and select Our Oil there, and then in the Property inspector put in oil.html. We'll select the Land and enter land.html, and then Company, the quick double-click to select, enter company.html. Now we're ready to go on to the next one, which is Process. And instead of going through that process again--no real pun intended there, but it just happens sometimes-- I'll select the content and get rid of it.
Let's go into Split view here. You can see that I'm in the "accordionpanelContent">
So now if I go to Design view, I'll see that put in there as an unordered list. Working with the HTML in Spry accordion panels for navigation is definitely different from a pure unordered list approach, but it really does give you a variety of different options to choose from when it comes to site navigation, and now we're ready to begin the styling process.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65348 Viewers
61 Video lessons · 96174 Viewers
56 Video lessons · 109982 Viewers
82 Video lessons · 105032 Viewers
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.