1
00:00:00,530 --> 00:00:04,510
In addition to tab menus we can also create pill menus.

2
00:00:04,590 --> 00:00:11,890
A general page as an example of both an inline pill menu and a vertical pill menu we'll start with the

3
00:00:11,890 --> 00:00:12,670
inline menu.

4
00:00:14,430 --> 00:00:21,720
In order to create an inline menu we start with creating an unordered list and setting the class to

5
00:00:22,570 --> 00:00:25,790
have enough pills.

6
00:00:25,790 --> 00:00:29,490
Next we create our list items.

7
00:00:29,690 --> 00:00:41,020
You can see that we have four list items each list item has a link element and the list item label.

8
00:00:41,210 --> 00:00:51,670
We have linked one link to the three and link for you'll also notice that list item 1 as a class attribute

9
00:00:51,790 --> 00:00:53,950
which is set to active.

10
00:00:54,160 --> 00:00:57,220
And this is the reason that link 1 is highlighted in blue

11
00:01:00,750 --> 00:01:06,670
we can also create vertical or stacked pool menus and to do that.

12
00:01:06,920 --> 00:01:18,880
We simply need to add the class nerve stocked to our existing class in the UL tag.

13
00:01:19,140 --> 00:01:28,590
And so if I save the file in refresh we can see that the menu items are now stacked in the second appeal

14
00:01:28,590 --> 00:01:36,670
menu example we've created a drop down menu on list item to as you can see when linked to is clicked

15
00:01:36,670 --> 00:01:39,380
a menu appears with three additional links

16
00:01:44,500 --> 00:01:55,300
to do this create a list item and set the class to dropdown so you can see that below list item number

17
00:01:55,300 --> 00:01:58,140
1 which is link 1.

18
00:01:58,180 --> 00:02:04,790
We've added a list element and set the class to dropdown.

19
00:02:04,820 --> 00:02:13,140
Next we create a link element in set the class to dropdown toggle with a data toggle attribute set to

20
00:02:13,170 --> 00:02:19,140
dropdown attach an empty link using the H R Yes attribute

21
00:02:22,090 --> 00:02:27,340
and once you define your label in this case we called it Link 2.

22
00:02:27,400 --> 00:02:34,860
We also added a spend element with a with the closet declared in ruby.

23
00:02:34,960 --> 00:02:38,880
That's the dropdown arrow.

24
00:02:39,190 --> 00:02:46,720
So after you've done that you can create your unordered list item.

25
00:02:49,790 --> 00:02:55,030
And set the class to drop down menu inside the unordered list.

26
00:02:55,040 --> 00:03:02,060
You can create all your list items so you can see we have siblings one sibling 2 and sibling 3.

27
00:03:02,060 --> 00:03:09,090
Each has a link element with the H R you f set to an empty link.

28
00:03:09,110 --> 00:03:10,880
So just the compound symbol.