Join Jen Kramer for an in-depth discussion in this video Adding a dropdown menu to the tabs and pill navigation, part of Up and Running with Bootstrap 2.
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.…
- Understanding the difference between default and fluid grids
- Nesting with fluid grids
- Creating a thumbnail gallery
- Adding block quotes and lists of text
- Incorporating images and icons
- Adding breadcrumb navigation and pagination
- Using tabs and pills navigation
- Adding dropdown menus to the nav bar, tabs, and pill
Skill Level Beginner
Q: I am trying to create the image carousels shown in this course, and they are not functioning properly. The custom.css file seems to be missing from the exercise files and I think this is the reason. Can you provide it?
<div>A: custom.css isn't created until the carousel indicators are added. However, these styles have to do with the way the indicators look, and nothinghas to do with the way the carousel functions.</div><div> </div><div>Are you sure you're working with Bootstrap 2.x? You download that from here:
<a target="_blank" href="http://getbootstrap.com/2.3.2/">http://getbootstrap.com/2.3.2/</a>. The carousel changed radically between Bootstrap 2.x and Bootstrap 3, and this course might not work with version 3.</div>