Steps for creating dropdown
- 1. Steps for cerating dropdown responsive menu in bootstrap Tabs with Dropdowns Pills with Dropdowns
- 2. Tabs with Dropdowns/Pills with Dropdowns step 1 • Create <ul> and <li> tag for navegation • <ul> <li> Home</li> <li>About us</li> <li> Product</li> <li> Contact</li> </ul>
- 3. Tabs with Dropdowns/Pills with Dropdowns step 2 • Add class="nav nav-tabs(for creating simple navigation) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li> Product</li> <li> Contact</li> </ul>
- 4. Tabs with Dropdowns/Pills with Dropdowns step 3 • Add class="dropdown in <li>product</li> (creating simple navigation) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li class="dropdown > Product</li> <li> Contact</li> </ul>
- 5. Tabs with Dropdowns/Pills with Dropdowns step 4 • Add <ul> and <li> tag(for dropdown menu in <li> product</li>) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li class="dropdown > Product <ul> <li> car</li> <li>car red</li> <li>car green</li> <li>car blue</li> </ul> </li> <li> Contact</li> </ul>
- 6. Tabs with Dropdowns/Pills with Dropdowns step 5 • Add class="dropdown-menu“ in dropdown <ul>(for creating dropdown) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li class="dropdown > Product <ul class="dropdown-menu “> <li> car</li> <li>car red</li> <li>car green</li> <li>car blue</li> </ul> </li> <li> Contact</li> </ul>
- 7. Tabs with Dropdowns/Pills with Dropdowns step 6 • Add tag<a class="dropdown-toggle" data-toggle="dropdown" href="#">(inside <li> befor product text for creating dropdown toggle effect on dropdown) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li class="dropdown > <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Product <ul class="dropdown-menu “> <li> car</li> <li>car red</li> <li>car green</li> <li>car blue</li> </ul> </li> <li> Contact</li> </ul>
- 8. Tabs with Dropdowns/Pills with Dropdowns step 7 • Add tag <span class="caret"></span> (inside <li> after product text for creating arrow indecating dropdown) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li class="dropdown > <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Product <span class="caret"></span> <ul class="dropdown-menu “> <li> car</li> <li>car red</li> <li>car green</li> <li>car blue</li> </ul> </li> <li> Contact</li> </ul>
- 9. Tabs with Dropdowns/Pills with Dropdowns step 8 • Add tag <li class="divider"></li> (before <li>car blue</li> for creating line separating ) • <ul class="nav nav-tabs > <li> Home</li> <li>About us</li> <li class="dropdown > <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Product <span class="caret"></span> <ul class="dropdown-menu “> <li> car</li> <li>car red</li> <li>car green</li> <li class="divider"></li> <li>car blue</li> </ul> </li> <li> Contact</li> </ul>