<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/vertisan/pen/xOLPXy?depth=everything&order=popularity&page=14&q=Overlay&show_forks=false" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style class="cp-pen-styles">body {
background-color: #583e7e;
color: #fff;
}
#wrapper {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
padding-right: 0;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 300px; /* SZEROKOŚĆ SIDEBARA */
}
#sidebar-wrapper {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
background: #1a1a1a; /* KOLOR SIDEBARA */
height: 100%;
overflow-x: hidden;
overflow-y: auto;
transition: all 0.5s ease;
width: 0;
z-index: 1000;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
.sidebar-nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 300px;
right: 0;/* SZEROKOŚĆ ZAWARTOŚCI SIDEBARA */
}
.sidebar-nav li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
.sidebar-nav li a {
color: #dddddd;
display: block;
padding: 10px 15px 10px 30px;
text-decoration: none;
}
.sidebar-nav .dropdown-menu {
background-color: grey; /* KOLOR BG DROPDOWNA */
border-radius: 0;
border: none;
box-shadow: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.active a,
.sidebar-nav li.active a:hover,
.sidebar-nav li.active a:active,
.sidebar-nav li.active a:focus {
background-color: transparent;
color: red;
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 20px;
height: 65px;
line-height: 44px;
}
.hamburger {
background: transparent;
border: none;
display: block;
height: 32px;
margin-right: 15px;
position: fixed;
top: 20px;
width: 32px;
right: 0;
z-index: 999;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.open-nav:before {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
color: #ffffff;
content: '';
display: block;
font-size: 14px;
line-height: 32px;
opacity: 0;
text-align: center;
width: 100px;
}
.hamburger.open-nav:hover before {
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all 0.35s ease-in-out;
display: block;
opacity: 1;
}
.hamburger.open-nav:hover .hamb-top {
-webkit-transition: all 0.35s ease-in-out;
top: 0;
}
.hamburger.open-nav:hover .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out;
bottom: 0;
}
.hamburger.open-nav .hamb-top {
-webkit-transition: all 0.35s ease-in-out;
background-color: rgba(255, 255, 255, 0.7);
top: 5px;
}
.hamburger.open-nav .hamb-middle {
background-color: rgba(255, 255, 255, 0.7);
margin-top: -2px;
top: 50%;
}
.hamburger.open-nav .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out;
background-color: rgba(255, 255, 255, 0.7);
bottom: 5px;
}
.hamburger.open-nav .hamb-top,
.hamburger.open-nav .hamb-middle,
.hamburger.open-nav .hamb-bottom {
height: 4px;
left: 0;
position: absolute;
width: 100%;
}
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
/* FOR left side */
.navbar-fixed-top {
left: auto;
}</style></head><body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Bootstrap 3
</a>
</li>
<li class="active">
<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
<li>
<a href="#" class="close">Close</a>
</li>
</ul>
</nav><!-- /#sidebar-wrapper -->
<div id="page-content-wrapper">
<button type="button" class="hamburger open-nav is-closed animated fadeInLeft">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae voluptatem, quisquam accusamus maiores laudantium animi commodi officiis sequi ad quo laborum ab reiciendis labore tempore veniam numquam atque eos, deleniti recusandae non, minus aliquid incidunt fugit. Quidem blanditiis atque suscipit illum delectus corrupti asperiores, quibusdam eos libero officiis, mollitia odio facere assumenda modi ratione, consequuntur quia saepe nisi ea culpa. Praesentium deleniti earum laboriosam eligendi iusto accusamus at voluptate sequi? Libero sequi aperiam architecto quidem deleniti quis et aliquid nisi ipsum necessitatibus veniam eius at neque, aut labore rem dolor perferendis earum eligendi quos praesentium cupiditate repellendus? Similique esse nostrum, aspernatur praesentium adipisci ipsam. Aliquam assumenda, illum quasi. Quae ab mollitia ipsam molestias iste deleniti beatae ad, sit soluta illum, fuga tempore consequatur dolore sequi inventore eum. Sequi suscipit libero, nobis magnam dicta id animi repellat quaerat expedita saepe eveniet eos voluptatibus culpa nihil amet a excepturi asperiores soluta, ex eaque. Doloremque itaque autem amet commodi corporis, quod est minima unde perferendis.
</p>
</div><!-- /.container -->
</div><!-- /#page-content-wrapper -->
</div><!-- /#wrapper -->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script >$(document).ready(function() {
var open = $('.open-nav'),
close = $('.close'),
overlay = $('.overlay');
open.click(function() {
overlay.show();
$('#wrapper').addClass('toggled');
});
close.click(function() {
overlay.hide();
$('#wrapper').removeClass('toggled');
});
});
//# sourceURL=pen.js
</script>
</body></html>
