cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <header class="header" role="banner">
  <div class="header-main">
    <a href="#" class="menu-toggle">
      <span class="navicon-button x">
        <div class="navicon"></div>
      </span>
    </a>
    <h1>Navigation Panel</h1>
  </div>
</header>
<div class="content-wrapper">
  <nav class="main-nav" id="main-nav" role="navigation">
    <div class="menu main-menu" id="main-menu" role="navigation">  
      <ul>
        <li><a href="#">Home</a></li>
        <li class="has-subnav">
          <a href="#">Header 1: The Dude</a>
          <ul>
            <li><a href="#">Subheader</a></li>
            <li><a href="">Subheader</a></li>
          </ul>
        </li>
        <li><a href="">Header 2: Walter</a></li>
        <li class="has-subnav">
          <a href="#">Header 3: Donny</a>
          <ul>
            <li><a href="#">Subheader</a></li>
          </ul>
        </li>
        <li><a href="#">Header 4: Lebowski</a></li>
        <li><a href="#">Header 5: Maude</a></li>
        <li><a href="#">Log Out</a></li>
      </ul>
    </div>
  </nav>
  
  <div class="primary-wrapper">
    <section class="main" id="main">
      <h3>Flyout navigation panel. Nav transitions used on transform(translate3d), based on these <a href="http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/">two</a> <a href="https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/">articles</a>.</h3>
      <article class="col-50">
        <p>Lebowski ipsum LOGJAMMIN'. We've got a man down, Dude. That is our most modestly priced receptacle. Brandt can't watch though. Or he has to pay a hundred. Finishing my coffee. I don't see any connection to Vietnam, Walter. Whose toe was it, Walter? I didn't blame anyone for the loss of my legs, some chinaman in Korea took them from me but I went out and achieved anyway.</p>

      <p>The new technology permits us to do exciting things with interactive erotic software. Wave of the future, Dude. 100% electronic. His girlfriend gafe up her toe! She sought we'd be getting million dollars! Iss not fair! They won't hurt us, Donny. These men are cowards. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, that was the handle his lovin' parents gave him, but he never had much use for it himself. This Lebowski, he called himself the Dude. Now, Dude, that's a name no one would self-apply where I come from. But then, there was a lot about the Dude that didn't make a whole lot of sense to me. And a lot about where he lived, likewise. But then again, maybe that's why I found the place s'durned innarestin'.</p>

      <p>And let me tell you something: I dig your work. Playing one side against the other —in bed with everybody— fabulous stuff, man. My point, Dude, is why should we settle for twenty grand when we can keep the entire million. Am I wrong? Your "revolution" is over, Mr. Lebowski! Condolences! The bums lost! You think veer kidding und making mit de funny stuff?</p>

      </article>
      <article class="col-50">
         <p>We wanted to talk about little Larry. May we come in? Wait in the car, Donny. Zere ARE no ROOLZ! This compulsive fornicator is taking my father for the proverbial ride. Say friend, ya got any more a that good sarsaparilla? I mean his wife goes out and owes money and they pee on my rug. Sir, this is a mortuary, not a rental house. He suspects that the culprits might be the very people who, uh, soiled your rug, and you're in a unique position to confirm or, uh, disconfirm that suspicion.</p>

      <p>A man will refer to his "dick" or his "rod" or his "Johnson". That guy treats objects like women, man. Hardly Dude, a new 'vette? The kid's still got, oh, 96 to 97 thousand, depending on the options. Dieter doesn't care about anything. He's a nihilist. Walter, this isn't a First Amendment thing. Jesus, man, can you change the station? No, look. I do mind. The Dude minds. This will not stand, you know, this aggression will not stand, man.</p>
      </article>
      
     

    </section>

  </div>

















            
          
!
            
              $background-color: #E4F5FF;
$nav-background: #3C6F8E;
$nav-header-color: lighten($nav-background, 50%);
$nav-link-color: white;
$header-color: #D4D98F;
$base-text-color: #333;
$breakpoint: 50em;
$transition-duration: .2s;
$bar-height: .2em;
$bar-width: 1em;

@mixin transition($item) {
    -webkit-transition: $item 0.2s ease-in-out;  
    -moz-transition: $item 0.2s ease-in-out;
    -ms-transition: $item 0.2s ease-in-out;
    -o-transition: $item 0.2s ease-in-out;
    transition: $item 0.2s ease-in-out;
}

.clearfix:after {    
    content: "";
    clear: both;
    display: table;   
}



/*------------------------

Layout

 ----------------------*/



body {
  @media (min-width: $breakpoint) {
    display: table;
    width: 100%;
    }
}

.content-wrapper {
    background: $background-color;
    overflow: hidden;
    width: 100%;
}

.primary-wrapper {
    min-height: 600px;
    position: relative;
    width: 100%;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    @extend .clearfix;
    @include transition(transform);
    @media (min-width: $breakpoint) {
        display: table-cell;
    }
    &.active {
        -moz-transform: translate3d(15em, 0, 0);
        -webkit-transform: translate3d(15em, 0, 0); 
        transform: translate3d(15em, 0, 0); 
    }
}

.main {
    padding: 1em;
    @media (min-width: $breakpoint) {
        margin: 0 auto;
        min-height: 700px;
        padding: 2em;
        
    }
}


/* --------------------

Menu

-------------------- */

/* Adapted Brad Frost's toggle menu (https://codepen.io/bradfrost/pen/sHvaz) */


.main-nav {
    background-color: $nav-background;  
    color: $nav-link-color;
    left: 0; 
    overflow: hidden; 
    min-height: 100%;
    min-width: 15em;
    width: 15em;
    position: absolute;
    vertical-align: top;
    -moz-transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    @extend .clearfix;
    @include transition(transform);
    @media (min-width: $breakpoint) {
        display: table-cell; 
        position: relative; 
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        -moz-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

    }

    a {
        color: $nav-link-color;
        text-decoration: none;
    }
}

.main-nav.active {
    width: 15em;
    @include transition(transform);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

a.menu-toggle {
    display: inline-block;
    @media (min-width: $breakpoint) {
        display:none;
    }
}

.main-menu {

    padding: 1em;
}

.main-menu > ul > li {
    margin-bottom: 1em;
}

.main-menu li {
    text-align: right;
}

.main-menu li > a {
    color: $nav-link-color;
    text-decoration: none;
    &:hover {
        color: $nav-header-color;
        text-decoration: underline;
    }
}
.main-menu > ul > li > a {
    color: $nav-link-color;
    &:hover {
        text-decoration: none;
    }
}

.main-menu > ul li ul li {
    font-size: .9em;
}


/* --------------------

Navicon

-------------------- */

.navicon-button {
    background-color: white;
    display: inline-block;
    font-size: 1.5em;
    position: relative; /* To absolutely position elements inside */
    padding: 1em .5em;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}

.navicon { /* Center bar */
  background-color: black;
  display: block;
  position: relative;
  width: $bar-width;
  height: $bar-height;
  @include transition(all);
  &:after, &:before { /* Top and bottom bars */
    background-color: black;
    display: block;
    content: "";
    height: $bar-height;
    width: $bar-width;
    position: absolute;
    @include transition(all);
  }
}

/* Hamburger */

.x .navicon { /* Positioning top and bottom bars */
  &:after {
    top: $bar-height + .1em; 
  }
  &:before {
    top: -($bar-height + .1em);
  }
}

.open.x .navicon { /* Angles bars to make the X */
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  &:after {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 0 !important;
  }
  &:before {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 0 !important;
    }
}




// General layout
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}
.header {
  background-color: $header-color;
  height: auto;
  h1 {
    display: inline-block;
    font-size: 1.6em;
    margin: 0;
    padding: 0 .5em;
  }
}

li {
  list-style-type: none;
}

.col-50 {
  padding: 1em;
  width: 100%;
  @media (min-width: $breakpoint){
    float: left;
    padding: 1em;
    width: 50%;
  }
}
            
          
!
            
               $(document).ready(function() {
  //$('body').addClass('js');
  var $menu = $('#main-nav'),
  $menulink = $('.menu-toggle'),
  $content = $('.primary-wrapper'),
  $menuTrigger = $('.has-subnav > a');

  $menulink.bind("click keypress", function(e) {
  e.preventDefault();
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  $content.toggleClass('active');
  });

  $menuTrigger.bind("click keypress", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.toggleClass('active').next('ul').toggleClass('active');
  });
   
   $(".menu-toggle").click(function () {
  $(this).find('.navicon-button').toggleClass("open");
  });
   
 });
            
          
!
999px
Loading ..................

Console