Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've got that nav bar in place and it's looking great, one of the next things people ask about at this point is how to add a drop-down to the navigation bar. And Bootstrap has a number of way of adding drop-downs to in fact a number of elements within a Bootstrap-powered web page. I am looking at getbootstrap.com. If you go to the component section of the documentation, and click on Dropdowns, you can read all about the dropdowns here and how they work. This is just dropdowns in general. Note also that over here in the left navigation, there's the option of button-based dropdowns.
I'm not going to cover these in this tutorial, but it is possible to add these dropdowns to individual buttons as well. So you can tie these dropdowns then to that navigation bar, you can tie them to pills or tabs or you can tie it to the responsive navigation bar and that's what I'm going to show you how to do in this video. So if you go to your Exercise Files folder and go to folder number 05_01, you'll find this HTML file. Copy this file from your Exercise Files folder over into your Bootstrap folder.
And open it up here in sublime text. If you right click anywhere on the page and say, Open in Browser, you'll see how this page currently looks. And, so there is that top navigation bar that we added before. And, you'll see that something else has been added here. And that is these names of the doctors here. They're actually under the about menu item. And, in fact this is still a responsive navigation bar. We still have our menu showing up here and it kind of, sort of looks okay at the smaller resolutions. But it doesn't really look particularly good like this just yet.
So if you take a look at the HTML that I've given you and we're down around lines 28 or so. This is just an ordered list for the main navigation bar and then you'll see that we have embedded in that another unordered list. One of the important points to remember with unordered lists is that if you're going to nest them in the way I've nested them here, is that this unordered list should go inside of the list item, the parent list item. Very, very important. I find that a lot of beginners to HTML forget this. They close their li and then they just insert the ul.
Really inside of the other ul and that's actually not correct. So, what we're going to do to make this work, then, as a dropdown, is we're just going to add some additional classes here, and then, this is just going to work as a dropdown. So, here on the li, here on line 28. This is the containing li for the document. Were going to add a class of dropdown, and then were going to add here on the ul, the embedded ul, we're going to add a class of dropdown hyphen menu.
And this is going to drive a lot of the styling that's involved here. Another little piece that's involved with the styling is something we'll add right here after the word about, but before the slash a. I'm going to add the span tag with a class of caret. CARET. And what that will do is it will put the little triangle next to the word About, indicating that there's a dropdown menu there. You don't have to put it in this span with a class of carat. Or you could swap it out for some other sort of icon, if you wish.
OK, so let's go ahead and save this page, File Save, and if you right-click anywhere or Cmd+click anywhere on the page and say Open in Browser, you will have the revised page displaying here inside of your browser Window, and you will see that the word about over here now has a little triangle next to it. That's driven by that span with the class of carat. If you click on the word About, you'll have your dropdown menu here. Now, it's worth noting of course, that Bootstrap's dropdowns are driven by clicks and not by hovers. And why is that? Well remember that this has to work on mobile devices as well as on desktops.
So, you can't really hover on anything on a mobile device. Your users are going to have to click on the particular item in order to find the dropdown to work with Bootstrap's dropdowns right out of the box.
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.
Your file was successfully uploaded.