123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
    <main class="main" role="main">
        <div class="mask"></div>
        <header>
            <h1>Off-Canvas Menu</h1>
        </header>
        <section class="content">
            <p>Ullamcorper inceptos in magna vestibulum penatibus aliquet tellus suspendisse nascetur convallis a id diam netus a a parturient posuere nam orci fermentum duis habitasse nam. Iaculis eros hendrerit rhoncus et enim commodo nulla vivamus consequat id rhoncus vestibulum a maecenas justo vestibulum mi vel purus id ullamcorper mus a. Potenti mattis placerat ligula a suspendisse ipsum mus elementum a himenaeos et aliquam inceptos euismod ad placerat sociosqu mauris vestibulum conubia condimentum semper penatibus ridiculus. Dictumst diam eros fames a elementum eros mus fusce feugiat vestibulum a dui parturient ad ullamcorper suspendisse eleifend vestibulum facilisi ridiculus. Condimentum felis sed laoreet aliquam proin dignissim eu mi ad vestibulum ut suspendisse volutpat nibh cras mi praesent morbi ad. Est libero facilisis vestibulum suspendisse rutrum fames a facilisi semper interdum consectetur consectetur a scelerisque parturient volutpat ad eros torquent tincidunt senectus risus adipiscing donec parturient. Maecenas mus suspendisse laoreet non morbi vestibulum eros dolor nam nullam nec parturient nascetur suspendisse tincidunt suspendisse convallis blandit.</p>

            <p>Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.</p>

            <p>Scelerisque condimentum pulvinar accumsan eget at nibh aliquet a maecenas lectus magnis per metus a mattis. Non ullamcorper dapibus in nostra a vitae scelerisque fusce ullamcorper lacinia cum magna vestibulum malesuada eros mus a phasellus a egestas pulvinar pretium aliquet. Adipiscing.</p>
        </section>
    </main>
    <aside class="sidebar">
        <nav class="nav">
            <ul class="nav-items">
                <li class="nav-title">Pages</li>
                <li><a href="#" class="nav-link">Home</a></li>
                <li><a href="#" class="nav-link">Products</a></li>
                <li><a href="#" class="nav-link">Services</a></li>
                <li><a href="#" class="nav-link">About</a></li>
                <li><a href="#" class="nav-link">News</a></li>
            </ul>
            <div class="sidebar-separator"></div>
            <ul class="nav-items">
                <li class="nav-title">More</li>
                <li><a href="#" class="nav-link">Contact</a></li>
                <li><a href="#" class="nav-link">Support</a></li>
                <li><a href="#" class="nav-link">Careers</a></li>
            </ul>
        </nav>
    </aside>
    <div class="hamburger">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</div>
            
          
!
            
              /* Page */

html {
    box-sizing: border-box;
    overflow: hidden;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}

body {
    background: #fff;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5em;
    color: #888;
}

.container {
    position: relative;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

/* Main */

.main {
    display: table;
    height: 100%;
    position: relative;
    transition-property: transform;
}

.mask {
    display: table-row;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
}

header {
    background-color: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db 0%, #217dbb 100%);
    background-image: linear-gradient(to bottom, #3498db 0%, #217dbb 100%);
    padding: 100px 50px;
    text-align: center;
}

header h1 {
    color: #fff;
    font-size: 3em;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.content {
    margin: 50px 50px;
}

/* Sidebar */

.sidebar {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    background: #1d2127;
    border-right: 3px solid #0f1114;
    overflow: hidden;
    -webkit-transform: translate3d(-260px, 0, 0);
    transform: translate3d(-260px, 0, 0);
    transition-property: transform;
    will-change: transform, -webkit-transform;
}

.sidebar, .sidebar a {
    color: #abb4be;
}

.nav {
    margin-top: 100px;
}

.nav-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-title {
    display: block;
    padding: 10px 50px;
    text-transform: uppercase;
    font-weight: 600;
    color: #465162;
}

.nav-link {
    display: block;
    padding: 10px 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav-link:hover {
    background-color: #282d36;
}

.sidebar-separator {
    margin: 30px;
    height: 2px;
    background-color: #000;
    border-bottom: 1px solid #2b313a;
}

/* Hamburger Icon */

.hamburger {
    display: block;
    position: fixed;
    left: 50px;
    top: 20px;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    background-color: #3498db;
    border: 2px solid #ddd;
    padding: 10px 7px;
    width: 50px;
    height: 46px;
    transition-property: background-color, border-color;
}

.bar {
    display: block;
    position: relative;
    background-color: #ddd;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    transition-property: transform, opacity, background-color, width;
}

.bar:first-child {
    top: 0;
}

.bar:nth-child(2) { 
    opacity: 1;
}

.bar:last-child {
    bottom: 0;
}

.hamburger:hover {
    border-color: #fff;
}

.hamburger:hover .bar {
    background-color: #fff;
}

.bar + .bar {
    margin-top: 5px;
}

/* Animation */

.main, .sidebar, .mask, .hamburger, .bar {
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(.694, .0482, .335, 1);
}

/* Show Sidebar */

.show-sidebar .main {
    -webkit-transform: translate3d(260px, 0, 0);
    transform: translate3d(260px, 0, 0);
}

.show-sidebar .sidebar {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.show-sidebar .mask {
    opacity: 1;
    pointer-events: auto;
}

.show-sidebar .hamburger {
    background-color: #282d36;
    border-color: #0f1114;
}

.show-sidebar .bar {
    background-color: #abb4be;
}

.show-sidebar .bar:first-child {
    width: 120%;
    -webkit-transform: rotate(45deg) translate(5px, 8px);
    transform: rotate(45deg) translate(5px, 8px);
}

.show-sidebar .bar:nth-child(2) {
    opacity: 0;
}

.show-sidebar .bar:last-child {
    width: 120%;
    -webkit-transform: rotate(-45deg) translate(4px, -8px);
    transform: rotate(-45deg) translate(4px, -8px);
}
            
          
!
            
              var container = document.querySelector('.container');
var main = document.querySelector('.main');

function toggleSidebar(){
    isShowingSidebar() ? hideSidebar() : showSidebar();
}

function showSidebar(){
    container.classList.add('show-sidebar');
}

function hideSidebar(){
    container.classList.remove('show-sidebar');
}

function isShowingSidebar(){
    return container.classList.contains('show-sidebar');
}

document.querySelector('.hamburger').addEventListener('click', toggleSidebar, false);

container.addEventListener('click', function(e){
    if(isShowingSidebar() && main.contains(e.target)){
        e.preventDefault();
        hideSidebar();
    }
}, true);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console