<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap 4: Admin Panel</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="header">
<a href="#" id="menu-action">
<i class="fa fa-bars"></i>
<span>Close</span>
</a>
<div class="logo">
Admin Panel
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#"><i class="fa fa-desktop"></i><span>Desktop</span></a></li>
<li><a href="#"><i class="fa fa-server"></i><span>Server</span></a></li>
<li><a href="#"><i class="fa fa-calendar"></i><span>Calendar</span></a></li>
<li><a href="#"><i class="fa fa-envelope-o"></i><span>Messages</span></a></li>
<li><a href="#"><i class="fa fa-table"></i><span>Data Table</span></a></li>
</ul>
</div>
<!-- Content -->
<div class="main">
<div class="">
<div class="jumbotron">
<h1>Hello, world!<a class="anchorjs-link" href="#hello,-world!"><span class="anchorjs-icon"></span></a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quisquam necessitatibus nesciunt nihil quod tenetur quas laudantium. Impedit, soluta tempore saepe voluptatibus officia quos sunt cum, veritatis laudantium mollitia sequi.</p>
<p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Danger</h4>
Something horribad happened.
</div>
<p><p>FRENCH SAILOR. Hist, boys! let's have a jig or two before we ride to anchor in Blanket Bay. What say ye? There comes the other watch. Stand by all legs! Pip! little Pip! hurrah with your tambourine!</p>
<p>PIP. (SULKY AND SLEEPY) Don't know where it is.</p>
<p>FRENCH SAILOR. Beat thy belly, then, and wag thy ears. Jig it, men, I say; merry's the word; hurrah! Damn me, won't you dance? Form, now, Indian-file, and gallop into the double-shuffle? Throw yourselves! Legs! legs!</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<p>Hoo-Hoo began to laugh.</p>
<p>"The woodtick sucks the blood of the dog, but the germ, being so very small, goes right into the blood of the body, and there it has many children. In those days there would be as many as a billion—a crab-shell, please—as many as that crab-shell in one man's body. We called germs micro-organisms. When a few million, or a billion, of them were in a man, in all the blood of a man, he was sick. These germs were a disease. There were many different kinds of them—more different kinds than there are grains of sand on this beach. We knew only a few of the kinds. The micro-organic world was an invisible world, a world we could not see, and we knew very little about it. Yet we did know something. There was the bacillus anthracis; there was the micrococcus; there was the Bacterium termo, and the Bacterium lactis—that's what turns the goat milk sour even to this day, Hare-Lip; and there were Schizomycetes without end. And there were many others...."</p>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script><script src="./script.js"></script>
</body>
</html>
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f5f5f5;
padding: 0;
margin: 0;
}
i.fa {
font-size: 16px;
}
p {
font-size: 16px;
line-height: 1.42857143;
}
.header {
position: fixed;
z-index: 10;
top: 0;
left: 0;
background: #3498DB;
width: 100%;
height: 50px;
line-height: 50px;
color: #fff;
}
.header .logo {
text-transform: uppercase;
letter-spacing: 1px;
}
.header #menu-action {
display: block;
float: left;
width: 60px;
height: 50px;
line-height: 50px;
margin-right: 15px;
color: #fff;
text-decoration: none;
text-align: center;
background: rgba(0, 0, 0, 0.15);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.header #menu-action i {
display: inline-block;
margin: 0 5px;
}
.header #menu-action span {
width: 0px;
display: none;
overflow: hidden;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.header #menu-action:hover {
background: rgba(0, 0, 0, 0.25);
}
.header #menu-action.active {
width: 250px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.header #menu-action.active span {
display: inline;
width: auto;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 50px;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar:hover,
.sidebar.active,
.sidebar.hovered {
width: 250px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar ul li {
display: block;
}
.sidebar ul li a {
display: block;
position: relative;
white-space: nowrap;
overflow: hidden;
border-bottom: 1px solid #ddd;
color: #444;
text-align: left;
}
.sidebar ul li a i {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
-webkit-animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
-o-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.sidebar ul li a span {
display: inline-block;
height: 60px;
line-height: 60px;
}
.sidebar ul li a:hover {
background-color: #eee;
}
.main {
position: relative;
display: block;
top: 50px;
left: 0;
padding: 15px;
padding-left: 75px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.main.active {
padding-left: 275px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.main .jumbotron {
background-color: #fff;
padding: 30px !important;
border: 1px solid #dfe8f1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main .jumbotron h1 {
font-size: 24px;
margin: 0;
padding: 0;
margin-bottom: 12px;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-ms-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
-ms-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
-ms-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
-ms-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
.bs-callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
background: white;
}
table {
background: white;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
border-radius: 3px;
}
.bs-callout + .bs-callout {
margin-top: -5px;
}
.bs-callout-default {
border-left-color: #777;
}
.bs-callout-default h4 {
color: #777;
}
.bs-callout-primary {
border-left-color: #428bca;
}
.bs-callout-primary h4 {
color: #428bca;
}
.bs-callout-success {
border-left-color: #5cb85c;
}
.bs-callout-success h4 {
color: #5cb85c;
}
.bs-callout-danger {
border-left-color: #d9534f;
}
.bs-callout-danger h4 {
color: #d9534f;
}
.bs-callout-warning {
border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-info {
border-left-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
$('#menu-action').click(function() {
$('.sidebar').toggleClass('active');
$('.main').toggleClass('active');
$(this).toggleClass('active');
if ($('.sidebar').hasClass('active')) {
$(this).find('i').addClass('fa-close');
$(this).find('i').removeClass('fa-bars');
} else {
$(this).find('i').addClass('fa-bars');
$(this).find('i').removeClass('fa-close');
}
});
// Add hover feedback on menu
$('#menu-action').hover(function() {
$('.sidebar').toggleClass('hovered');
});