<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Admin Menu</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.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">
Simple Admin
</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>
</div>
<!-- Content -->
<div class="main">
<div class="hipsum">
<div class="jumbotron">
<h1 id="hello,-world!">Hello, world!<a class="anchorjs-link" href="#hello,-world!"><span class="anchorjs-icon"></span></a></h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>
</div>
<p>Keffiyeh banjo keytar selfies. Actually plaid PBR&B, High Life dreamcatcher kale chips master cleanse craft beer messenger bag locavore Brooklyn Blue Bottle. Freegan literally brunch kale chips small batch. Etsy iPhone gentrify photo booth. Lomo
keffiyeh vinyl, distillery pop-up messenger bag kale chips post-ironic DIY 90's keytar. Intelligentsia next level Pitchfork forage vinyl Marfa, normcore heirloom. Drinking vinegar asymmetrical roof party, yr artisan Carles mixtape jean shorts.</p>
<table class="table table-bordered">
<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>Slow-carb fanny pack yr Brooklyn gentrify. Fanny pack keffiyeh taxidermy, ugh viral polaroid craft beer. +1 distillery Truffaut typewriter tousled crucifix, lo-fi butcher normcore skateboard. Drinking vinegar ugh whatever sriracha. Synth tofu viral
butcher flexitarian. 3 wolf moon Schlitz plaid small batch kale chips blog. Fingerstache selfies freegan, Helvetica Neutra Brooklyn semiotics cred narwhal beard tousled leggings.</p>
<div class="row">
<div class="col-sm-6">
<p>Slow-carb fanny pack yr Brooklyn gentrify. Fanny pack keffiyeh taxidermy, ugh viral polaroid craft beer. +1 distillery Truffaut typewriter tousled crucifix, lo-fi butcher normcore skateboard. Drinking vinegar ugh whatever sriracha. Synth tofu
viral butcher flexitarian. 3 wolf moon Schlitz plaid small batch kale chips blog. Fingerstache selfies freegan, Helvetica Neutra Brooklyn semiotics cred narwhal beard tousled leggings.</p>
</div>
<div class="col-sm-6">
<p>Slow-carb fanny pack yr Brooklyn gentrify. Fanny pack keffiyeh taxidermy, ugh viral polaroid craft beer. +1 distillery Truffaut typewriter tousled crucifix, lo-fi butcher normcore skateboard. Drinking vinegar ugh whatever sriracha. Synth tofu
viral butcher flexitarian. 3 wolf moon Schlitz plaid small batch kale chips blog. Fingerstache selfies freegan, Helvetica Neutra Brooklyn semiotics cred narwhal beard tousled leggings.</p>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f5f5f5;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
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;
}
.sidebar ul li a:hover i {
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
.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;
}
$('#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');
});