Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"tab with megamenu"
Bootstrap 3.3.0 Snippet by
jaseem
3.3.0
jQuery
menu
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
10.0K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="top-area"> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo" class="img-responsive"></a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/student.png" class="img-responsive"></div> Academics</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#student" data-toggle="tab">Student</a></li> <li><a href="#attendance" data-toggle="tab">Attendance</a></li> <li><a href="#timetable" data-toggle="tab">Time Table</a></li> <li><a href="#library" data-toggle="tab">Library</a></li> <li><a href="#certification" data-toggle="tab">Certification</a></li> <li><a href="#whtasnew" data-toggle="tab">Whats New</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane active in" id="student"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Student Admission </li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Student List </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Class Allocation </li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Student Category </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Id card Generation</li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Bulk Upload</li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Remarks </li> </ul> </div> </div> </div> <div class="tab-pane fade" id="attendance"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/checking-attendance.png" class="img-responsive"></div> Attendance Register </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/checking-attendance.png" class="img-responsive"></div> Attendance Report </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/checking-attendance.png" class="img-responsive"></div> Day Wise Report</li> </ul> </div> </div> </div> <div class="tab-pane fade" id="timetable"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Time Table Master </li> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Set Period </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Set Week Days </li> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Allocate Time Table </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Assign Subject</li> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> View Time table</li> </ul> </div> </div> </div> <div class="tab-pane fade in" id="library"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Category</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Details </li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Purchase</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Barcode Print</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Issue </li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Return</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Renewal</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book List</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Damaged/Scrap Book </li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Damaged/Scrap Book Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Advance Booking Books</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Date Wise Book Issue/Return Report</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Dues List</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Student Wise Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Staff Wise Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Wise Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Issue/Return Report</li> </ul> </div> </div> </div> <div class="tab-pane fade" id="certification"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/diploma.png" class="img-responsive"></div> Certificate Type</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/diploma.png" class="img-responsive"></div> Custom Certificate </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/diploma.png" class="img-responsive"></div> Generate Certificate </li> </ul> </div> </div> </div> <div class="tab-pane fade" id="whtasnew"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bell.png" class="img-responsive"></div> News</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bell.png" class="img-responsive"></div> Events</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bell.png" class="img-responsive"></div> Notice</li> </ul> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/manager-1.png" class="img-responsive"></div> Administration</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#fee" data-toggle="tab">Fee</a></li> <li><a href="#inventory" data-toggle="tab">Inventory</a></li> <li><a href="#transportation" data-toggle="tab">Transportation</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> <li><a href="#humanresource" data-toggle="tab">Human Resource</a></li> </ul> <div id="TabContent" class="tab-content"> <div class="tab-pane active in" id="fee"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Configuration </li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Category</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Type</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Sub Category</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Receipt Format</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fine</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Discount</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Waiver</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Allocation</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Collection</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Class wise Fee Collection </li> </ul> </div> </div> </div> <div class="tab-pane" id="inventory"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Vendors Registration </li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>item category</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>Store item</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Receipt Voucher</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>Payment voucher</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> purchase invoice</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>sales invoice</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>purchase return invoice</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> sales return invoice</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>cash book</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>day book</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>sales report</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>salesreturn report</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>purchase report</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> purchase return report</li> </ul> </div> </div> </div> <div class="tab-pane" id="transportation"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Route Master</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Route Details </li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Vehicle Details</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Driver Details</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Students Allocation</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Fee Collection</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Transport Cancellation</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Transport Cancellation Renewal</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Route change option</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Print Receipt</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> List All Route-Route Details</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Pending Report</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Paid Report</li> </ul> </div> </div> </div> <div class="tab-pane" id="settings"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> General Settings</li> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> Institute settings </li> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> Course & Batch Settings</li> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> Manage Subject</li> </ul> </div> </div> </div> <div class="tab-pane" id="humanresource"> <div class="row"> </div> </div> </div> </div> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/user-1.png" class="img-responsive"></div> Interaction</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#interaction" data-toggle="tab">Interaction</a></li> </ul> <div id="TabContent" class="tab-content"> <div class="tab-pane active in" id="interaction"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> News</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Events </li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Notice</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Home Work</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Dairy</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Gallery</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Send Email</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Mail Settings</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Mail Templates</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Send SMS</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> SMS Templates</li> </ul> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/edit.png" class="img-responsive"></div> Report</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#report" data-toggle="tab">Report</a></li> </ul> <div id="TabContent" class="tab-content"> <div class="tab-pane active in" id="report"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Detail Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Academic Performance Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Birthdays Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Identity Card Generation</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Attendance Report</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Home Date Wise Fee Collection</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Fees Due Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Fee Fine Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Fee Fee Concession Report</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div>Date Wise Book Issue</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div>Student Wise Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Book Wise Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div>Book Return Report</li> </ul> </div> </div> </div> </div> </div> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img src="images/icon/avatar-.png" class="img-responsive"></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </li> </ul> </div> <!-- /.nav-collapse --> </nav> </div> </div>
/* CSS Document */ body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background-color: #fff; } .row { margin: 0; padding: 0; } .top-area { background-color: #eb7260; float: left; width: 100%; } .navbar-nav { margin-left: 6%; } .navbar-default .navbar-nav>li>a { color: #fff; } .navbar-brand { width: 135px; float: left; margin: 0; padding: 0; } /* .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color: #fff} */ .navbar-default { background-color: #eb7260; border: none; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background-color: #354459 !important; color: #fff !important } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { background-color: #354459 !important; color: #fff !important } .navbar-nav>li>a { padding-bottom: 10px; line-height: 25px } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; -webkit-box-shadow: none; box-shadow: none; background-color: #e9e1d6; border-radius: 0px; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #fff; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .sub-menu { margin: 0; padding: 0; width: 100%; float: left; margin-top: 30px; } .sub-menu li { list-style: none; line-height: 30px; color: #999; font-size: 13px; height: 45px; font-weight: 400; } .sub-menu li a { color: #999; } .sub-menu li a:hover { color: #EF041A; } .icon { width: 23px; float: left; margin-right: 15px; } /*tabstyle*/ .navbar { margin-bottom: 0px; } .nav-tabs { border: none; background-color: #e1e1e1; } .well { padding: 0px; border: none; background-color: #e6e6e6; margin: 0; box-shadow: none; border-radius: 0px; } .nav-tabs>li>a { color: #3e3e3e; border-radius: 0px; border: none; margin-right: 0; } .nav-tabs>li.active>a { background-color: #f1f1f1 !important; border-top: 1px solid #cccccc !important; border-left: 1px solid #cccc !important; border-right: 1px solid #cccccc !important; border-bottom: 3px solid #f1f1f1 !important; } .nav>li>a:focus, .nav>li>a:hover { background: none; } .tab-content>.tab-pane { min-height: 260px; margin: 0; } .tab-content>.active { background-color: #fff; } .sub-heading { margin: 20px 0 0 0; padding: 0; color: #ccc; } margin: 20px 0; }
$(document).ready(function () { $(".dropdown").click(function () { $('.dropdown-menu', this).stop(true, true).slideDown("fast"); $(this).toggleClass('open'); }); $(document).click(function (event) { console.log($(event.target).closest('.dropdown').length); if (!$(event.target).closest('.dropdown').length) { $('.dropdown').each(function () { if ($(this).has('open')) { $('.dropdown-menu', this).stop(true, true).slideUp("fast"); } }); } }); });
Related:
See More
Template
Paper Dashboard Pro Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76