Creating Menu and dropdown using Nav tabs

Manideepgoud
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 1483 red flag
Rating: 5 out of 5  
 1 vote(s)

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.
Page copy protected against web site content infringement by Copyscape

About the Author

Manideepgoud
Full Name: manideep goud
Member Level: Starter
Member Status: Member
Member Since: 6/11/2015 5:55:01 AM
Country: India



Login to vote for this post.

Comments or Responses

Posted by: Bhuvanesh6 on: 7/21/2016 | Points: 25
How it understand/Identify about the device that is viewed ?
Posted by: Manideepgoud on: 7/22/2016 | Points: 25
Dear Bhuvanesh

In this article i just explained how to call the description of list values in below by creating dropdown.

Thanks


Posted by: Aditihasini on: 8/26/2016 | Points: 25
Thanks for the information.

Login to post response

Comment using Facebook(Author doesn't get notification)