Prev Demo
Creating Menu With Description
Next Demo
Write code here
J
|
B
|
A
<!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="#">Login</a></li> <li style="float:right"><a data-toggle="tab" href="#">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>
Note: We DO NOT save your trial code in our database.
Output
