Using a simple Bootstrap plug-in, you can add dropdown menu in tabs by using the dropdown class. The nav and nav-tabs classes are also used to achieve this.
First, make an unordered list and give it a class of nav and nav-tabs. Now, give a class of dropdown to the list item tag which you wish to behave as a dropdown.
The next step is to create an unordered list for the dropdown tab and giving it a class of dropdown-menu.
You can also customize the dropdown menu and the nav links by writing your own CSS and overriding Bootstrap’s CSS. Here’s a working example for the same.
Example:
<!DOCTYPE html> < html >
< head >
< title > Welcome to GFG </ title >
< style >
.main { margin-top: 20vh; margin-left: 10vw; } .tab-pane { width:100%;
background-color:#b6b0d2;
padding:10px;
color: black;
} .nav-tabs > li a { border: 2px solid black;
background-color:#35218e;
color:#fff;
margin-right: 1.2vw;
} .nav-tabs > li.active > a { background-color:#b6b0d2;
color:#000;
border: 1px solid #35218e;
} .nav-tabs > li.active > a:focus { background-color: #c9bad1; color:#000; } .nav-tabs > li > a:hover { background-color: #b6b0d2 ;
} </ style >
</ head >
< body >
< div class = "container main" >
< ul class = "nav nav-tabs" role = "tablist" >
< li class = "active homeTab" >
< a href = "#home" role = "tab" data-toggle = "tab" >Home</ a ></ li >
< li >< a href = "#section1" data-toggle = "tab" role = "tab" >Section1</ a ></ li >
< li >< a href = "#section2" data-toggle = "tab" role = "tab" >Section2</ a ></ li >
< li class = "dropdown" >
< a class = "dropdown-toggle"
data-toggle = "dropdown" >
Section4 < b class = "caret" >
</ b ></ a >
< ul class = "dropdown-menu" >
< li >< a href = "#subSection1" role = "tab" data-toggle = "tab" >
Sub-section 1</ a ></ li >
< li >< a href = "#subSection2" role = "tab" data-toggle = "tab" >
Sub-section 2</ a ></ li >
< li >< a href = "#subSection3" role = "tab"
data-toggle = "tab" >
Sub-section 3</ a ></ li >
</ ul >
</ li >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" >
Section4 < b class = "caret" >
</ b ></ a >
< ul class = "dropdown-menu" >
< li >< a href = "#subSection1" role = "tab" data-toggle = "tab" >
Sub-section 1</ a ></ li >
< li >< a href = "#subSection2" role = "tab" data-toggle = "tab" >
Sub-section 2</ a ></ li >
< li >< a href = "#subSection3" role = "tab" data-toggle = "tab" >
Sub-section 3</ a ></ li >
</ ul >
</ li >
< div class = "tab-content" >
< div class = "tab-pane active" id = "home" >
Bootstrap is a free and open-source tool
collection for creating responsive websites
and web applications. It is the most popular
HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.
Nowadays, the websites are perfect for all
the browsers (IE, Firefox and Chrome) and for
all sizes of screens (Desktop, Tablets,
Phablets, and Phones). All thanks to
Bootstrap developers – Mark Otto and Jacob
Thornton of Twitter, though it was later
declared to be an open-source project.
</ div >
< div class = "tab-pane" id = "section1" >
Bootstrap is a free and open-source tool collection for creating responsive websites
and web applications. </ div >
< div class = "tab-pane" id = "section2" >
Bootstrap is a free and open-source tool collection for creating responsive websites
and web applications.</ div >
< div class = "tab-pane" id = "section3" >
Bootstrap is a free and open-source tool collection for creating responsive websites
and web applications.</ div >
< div class = "tab-pane" id = "subSection1" >
Sub section1 content</ div >
< div class = "tab-pane" id = "subSection2" >
Sub Section 2 content
</ div >
</ div >
</ body >
</ html >
|
Output