Add a dropdown menu to the tabs and pill navigation Bootstrap 2


show more Adding a dropdown menu to the tabs and pill navigation provides you with in-depth training on Web. Taught by Jen Kramer as part of the Up and Running with Bootstrap 2 show less
please wait ...

Adding a dropdown menu to the tabs and pill navigation

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 ...

Adding a dropdown menu to the tabs and pill navigation
Video duration: 3m 32s 2h 38m Beginner

Viewers:

Adding a dropdown menu to the tabs and pill navigation provides you with in-depth training on Web. Taught by Jen Kramer as part of the Up and Running with Bootstrap 2

Subject:
Web
Software:
Bootstrap
Author:
please wait ...