1
00:00:00,570 --> 00:00:06,780
We can use bootstrap to create different menu styles including tab and pool menus let's start with an

2
00:00:06,780 --> 00:00:17,620
example of a very basic menu in this first example here we have a menu with four links this menu was

3
00:00:17,620 --> 00:00:23,940
created by making a you well element and setting the class to list in line.

4
00:00:24,980 --> 00:00:28,420
This makes all the list items appear in a single row.

5
00:00:32,620 --> 00:00:39,950
We then created each list item and attached a link attribute and the link label.

6
00:00:40,170 --> 00:00:47,370
Here we have link one link to link 3 and Link 4 each contained within a list item

7
00:00:50,330 --> 00:01:02,080
we can easily convert this basic menu into a more stylish tab menu by changing the class to NAV nav

8
00:01:02,230 --> 00:01:08,180
tabs so if I save the file and refresh.

9
00:01:08,370 --> 00:01:18,190
This is an example of a tab menu we can also set a default active tab by adding a class attribute and

10
00:01:18,190 --> 00:01:21,610
setting it to active on the desired list item.

11
00:01:22,390 --> 00:01:27,640
So let's say we want to set link 1 to active.

12
00:01:27,810 --> 00:01:40,170
Simply put class equals active on the list item and you can see that link 1 is now active in the second

13
00:01:40,170 --> 00:01:42,350
example here.

14
00:01:42,750 --> 00:01:52,230
We've added a drop down menu to tab link too so we have our top tab menu but we also have a drop down

15
00:01:52,230 --> 00:02:02,830
menu on link to the menu has three siblings not add a drop down menu.

16
00:02:03,130 --> 00:02:08,680
We create a list element beneath our first tab list item.

17
00:02:08,680 --> 00:02:16,570
So if you as you can see our first list item is link 1 right after the closing list tag.

18
00:02:16,570 --> 00:02:23,490
We create an opening list tag and this has a class of dropdown.

19
00:02:23,610 --> 00:02:29,720
We then set up an element with the class dropdown toggle.

20
00:02:29,870 --> 00:02:33,680
So we have our element class dropdown toggle.

21
00:02:34,700 --> 00:02:44,970
We also have to set a date and toggle attribute and make that equal dropdown so this should look familiar

22
00:02:44,970 --> 00:02:54,180
by now and all we're doing is attaching classes that are and attributes that are necessary for the dropdown

23
00:02:54,180 --> 00:02:57,910
to work.

24
00:02:57,910 --> 00:03:07,660
We also give it an empty link with the H R F attribute set to the pound symbol and link to is our link

25
00:03:07,660 --> 00:03:14,220
label so we can see it says link to their.

26
00:03:14,240 --> 00:03:23,390
You can also add the icon and the downward pointing arrow here by creating a span and setting the class

27
00:03:23,420 --> 00:03:25,700
equal to care.

28
00:03:32,930 --> 00:03:43,620
Next we need to create an unordered list and set the class of this list to drop down menu.

29
00:03:43,680 --> 00:03:45,360
You can then create your list items.

30
00:03:45,360 --> 00:03:51,590
We have three siblings on this drop down menu but you can have as many as you like.

31
00:03:53,710 --> 00:04:02,860
And each list item contains a link element using the A tags and the linked label so you can see we have

32
00:04:02,860 --> 00:04:05,470
siblings 1 sibling 2 and sibling 3

33
00:04:09,480 --> 00:04:10,530
once complete.

34
00:04:10,530 --> 00:04:14,580
Close the open you all tag it also the open list tag

35
00:04:17,640 --> 00:04:22,040
then continue with the additional list items for your tab menu.

36
00:04:22,110 --> 00:04:30,310
So for example we have two additional items here Link 3 Link 4 and you can see that we've we have them

37
00:04:30,400 --> 00:04:41,810
we have them inputted here after the menu and finally just close the tab menus open you will tag with

38
00:04:41,810 --> 00:04:43,110
the closing you old tag.