Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Back in the last chapter we built a pill-based menu, and we're taking a look at a format of that right now. The pill-based menu had this rounded cornered blue rectangle indicating where you were on the page, and when you rolled over the navigation you had this light gray one that goes across the tab. I've added to this a secondary navigation right under schedule, which is where it appears right now. And I'd like this to be a dropdown menu, but at the moment it's displaying on this page in a static manner.
So let's take a look at the code and see what we need to do to make this truly a dropdown menu. So if you take a look here inside of Dreamweaver, you can see that I have added this bulleted list right here, lines 23 to 27. They are located inside of the li for schedule. That is the correct way to mark this up. Note that you start with the opening tag here on line 22 and the closing tag on line 28. In between you have the bullet list, each with its own bullet. So to make this a dropdown menu, there are several things we need to do to make that happen.
It doesn't look like there's a secondary navigation, but when I roll over the word schedule and click, you'll see that I get a dropdown that results. So that's pretty cool. But how did I know that I can click on the word schedule? Only because I coded it. We need to have some sort of indicator that the dropdown lives there under schedule. So to do that, we could add a little triangle that points downwards, and that would be a great indicator of that schedule is interactive and has a dropdown associated with it. So to do that, right here we have the word schedule. Just after that I'm going to put a space followed by a span class of caret and a /span.
It's exactly what we just did in the navigation bar dropdown video. So go ahead and save that, and if you refresh in Firefox, you'll see that the word schedule now has a triangle by it. That triangle's clickable and our dropdown menu appears underneath. So based on the code that I've given you here, you can add as many dropdown menus as you wish to your web pages. You can continue to add those through every navigation item that's on this page.
You could even apply them to some of these secondary navigation items. You could give them a nested list as well and have another dropdown appear from there as well.
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.