Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand. Creating Menu and dropdown using nav-tabs using BootStrap
Introduction
In order to create menu in the bootstrap we have to use nav-tabs
Background
The main objective of this article is to learn how to create menu and content of the menu
Describe the topic with code snippets
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h3>Menu List using nav tab</h3>
<div class="container">
<ul class="nav nav-tabs" style="border:1px solid red;margin:0;border-top-left-radius:10px;border-top-right-radius:10px;background-color:lightgray;">
<li><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#school">School</a></li>
<li><a data-toggle="tab" href="#college">College</a></li>
<li><a data-toggle="tab" href="#office">Office</a></li>
<li style="float:right"><a data-toggle="tab" href="#office">Login</a></li>
<li style="float:right"><a data-toggle="tab" href="#office">Register</a></li>
</ul>
<div class="tab-content" style="border:1px solid red;margin:0;">
<div id="home" class="tab-pane fade in active clearfix">
<br />
<div class="row">
<div class="col-xs-12">
<div class="col-xs-10">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:green;color:white;"><a href="http://sn.itfunda.com/" style="color:white;">SN ITFunda</a></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">
<select name="websites">
<optgroup label="Please Select" />
<option value="1">DotNetFunda</option>
<option value="2">interviews</option>
<option value="3">Forums</option>
<option value="4">Tutorials</option>
</select>
</div>
<div class="col-xs-3">
<select name="websites">
<optgroup label="Please Select" />
<option value="1">ITFunda</option>
<option value="2">Sales</option>
<option value="3">OnlineTraining</option>
<option value="4">OfflineTraining</option>
</select>
</div>
<div class="col-xs-3">
<select name="websites">
<optgroup label="Please Select" />
<option value="1">TechFunda</option>
<option value="2">AngularJS</option>
<option value="3">BootStrap</option>
<option value="4">JavaScript</option>
</select>
</div>
<div class="col-xs-3">
<select name="websites">
<optgroup label="Please Select" />
<option value="1">KidsFunda</option>
<option value="2">Games</option>
<option value="3">Videos</option>
<option value="4">Drawings</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:green;"><a style="color:white;" href="http://www.farmingfunda.com">FarmingFunda</a></div>
<div class="panel-body">Games</div>
</div>
</div>
</div>
</div>
</div>
<div id="school" class="tab-pane fade clearfix">
<br />
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Teachers</a></div>
<div class="panel-body">Books</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Exams</a></div>
<div class="panel-body">Games</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Library</a></div>
<div class="panel-body">prayer</div>
</div>
</div>
</div>
</div>
</div>
<div id="college" class="tab-pane fade clearfix">
<br />
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Friends</a></div>
<div class="panel-body">Lecturers</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Exams</a></div>
<div class="panel-body">Labs</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Project</a></div>
<div class="panel-body">Seminar</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Sports</a></div>
<div class="panel-body">Canteen</div>
</div>
</div>
</div>
</div>
</div>
<div id="office" class="tab-pane fade clearfix">
<br />
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">Work</a></div>
<div class="panel-body">Target</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading"style="background-color:green;"><a href="#" style="color:white;">HR</a></div>
<div class="panel-body">TeamLeader</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>- In the above code snippet we have created the list values in <ul>elements and we have defined the list values using class values as data-toggle as tab
- In the next line we have div with class value as tab-content to define the listvalue description and we have created different grids to define the values an created dropdowns for the list value description
- We have four list values defining the description for the every single list value.
About the Author
Full Name:
manideep goudMember Level: Starter
Member Status: Member
Member Since: 6/11/2015 5:55:01 AM
Country: India