We can use bootstrap to create different menu styles including tab and pool menus let's start with an
example of a very basic menu in this first example here we have a menu with four links this menu was
created by making a you well element and setting the class to list in line.
This makes all the list items appear in a single row.
We then created each list item and attached a link attribute and the link label.
Here we have link one link to link 3 and Link 4 each contained within a list item
we can easily convert this basic menu into a more stylish tab menu by changing the class to NAV nav
tabs so if I save the file and refresh.
This is an example of a tab menu we can also set a default active tab by adding a class attribute and
setting it to active on the desired list item.
So let's say we want to set link 1 to active.
Simply put class equals active on the list item and you can see that link 1 is now active in the second
example here.
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
menu on link to the menu has three siblings not add a drop down menu.
We create a list element beneath our first tab list item.
So if you as you can see our first list item is link 1 right after the closing list tag.
We create an opening list tag and this has a class of dropdown.
We then set up an element with the class dropdown toggle.
So we have our element class dropdown toggle.
We also have to set a date and toggle attribute and make that equal dropdown so this should look familiar
by now and all we're doing is attaching classes that are and attributes that are necessary for the dropdown
to work.
We also give it an empty link with the H R F attribute set to the pound symbol and link to is our link
label so we can see it says link to their.
You can also add the icon and the downward pointing arrow here by creating a span and setting the class
equal to care.
Next we need to create an unordered list and set the class of this list to drop down menu.
You can then create your list items.
We have three siblings on this drop down menu but you can have as many as you like.
And each list item contains a link element using the A tags and the linked label so you can see we have
siblings 1 sibling 2 and sibling 3
once complete.
Close the open you all tag it also the open list tag
then continue with the additional list items for your tab menu.
So for example we have two additional items here Link 3 Link 4 and you can see that we've we have them
we have them inputted here after the menu and finally just close the tab menus open you will tag with
the closing you old tag.