"Dashboard"
Bootstrap 3.0.0 Snippet by sumi9xm

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://use.fontawesome.com/07b0ce5d10.js"></script>
<div class="page-topbar">
<div class="logo-area"> </div>
<div class="quick-area">
<ul class="pull-left info-menu user-notify">
<button id="menu_icon"><i class="fa fa-bars" aria-hidden="true"></i></button>
<li><a href="#"> <i class="fa fa-envelope"></i> <span class="badge">8</span></a></li>
<li><a href="#"> <i class="fa fa-bell"></i> <span class="badge">5</span></a></li>
</ul>
<ul class="pull-right info-menu user-info">
<li class="profile">
<a href="#" data-toggle="dropdown" class="toggle" aria-expanded="false">
<img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADso/ZGTVC0LVk1cFReheTbZzpGa2aawWyV8QACL0B/w140-d-h148-p-rw/profile-pic.jpg" class="img-circle img-inline">
<span>Taylor <i class="fa fa-angle-down"></i></span>
</a>
<ul class="dropdown-menu profile fadeIn ">
<li>
<a href="#settings">
<i class="fa fa-wrench"></i>
Settings
</a>
</li>
<li>
<a href="#profile">
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
/*///////////////////////////DASH BOARD NAVBAR///////////////////////////*/
.page-topbar {
min-height: 60px;
position: fixed;
width: 100%;
background-color: #35395c;
top: 0px;
left: 0px;
z-index: 1999;
box-shadow: 0 2px 4px rgba(33,33,33,.2);
-webkit-box-shadow: 0 2px 4px rgba(33,33,33,.2);
-moz-box-shadow: 0 2px 4px rgba(33,33,33,.2);
-o-box-shadow: 0 2px 4px rgba(33,33,33,.2);
-ms-box-shadow: 0 2px 4px rgba(33,33,33,.2);
max-height: 60px;
}
/*Transition==========================*/
.page-topbar, .logo-area, .logo-area, #main-content, .logo-icon, .wraplist, .page-sidebar, .profile-info, .profile-image, .profile-details, .menu-title, .profile-image a img {
-webkit-transition: 600ms;
-moz-transition: 600ms;
-o-transition: 600ms;
transition: 600ms;
}
.page-topbar .logo-area {
background-image: url("https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADsM/QUIsUhwEVAgj1-fK8mqzAqDiDwEKlKc7QCL0B/w185-d-h40-p-rw/logo.png");
background-repeat: no-repeat;
}
.page-topbar .logo-area {
width: 240px;
background-color: #35395c;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function() {
$('#menu_icon').click(function() {
if ($('.page-sidebar').hasClass('expandit')){
$('.page-sidebar').addClass('collapseit');
$('.page-sidebar').removeClass('expandit');
$('.profile-info').addClass('short-profile');
$('.logo-area').addClass('logo-icon');
$('#main-content').addClass('sidebar_shift');
$('.menu-title').css("display", "none");
} else {
$('.page-sidebar').addClass('expandit');
$('.page-sidebar').removeClass('collapseit');
$('.profile-info').removeClass('short-profile');
$('.logo-area').removeClass('logo-icon');
$('#main-content').removeClass('sidebar_shift');
$('.menu-title').css("display", "inline-block");
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard
Flat Responsive Dashboard Design
Social Dashboard

Questions / Comments: