"tab with megamenu"
Bootstrap 3.3.0 Snippet by jaseem

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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}
*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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");
}
});
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard

Questions / Comments: