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.

+ 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.

            
              <div class="menu hide">
  <div class="header">
    <a><span id="site-title">Site Title</span></a>
    <span id="menu-icon"><img src="https://goo.gl/3hQUbp"/></span>
  </div>
  
  <div class="items clearfix">
    <a><div class="menu-item selected">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
    <a><div class="menu-item">Hipster Ipsum</div></a>
  </div>
  
  <div class="footer">
    <a><h3 class="footer-item">Email</h3></a>
    <a><h3 class="footer-item">Twitter</h3></a>
    <a><h3 class="footer-item">CodePen</h3></a>
  </div>
</div>

<div class="content">
  <div class="content-wrapper">
    <h1>Title of Article</h1>
    <h3>Subtitle of Article</h3>
    <p style="margin-top: 1em;">
      Keffiyeh bitters craft beer, semiotics single-origin coffee vegan fashion axe DIY cliche XOXO. Hashtag drinking vinegar quinoa messenger bag sartorial Odd Future banjo, tote bag polaroid plaid food truck Pinterest Neutra chia cray. Fap swag XOXO irony, pork belly typewriter Wes Anderson Austin keytar locavore sustainable yr bicycle rights. Plaid PBR fanny pack, Cosby sweater locavore hoodie salvia polaroid butcher cred next level YOLO kogi readymade. Street art Etsy bitters before they sold out trust fund selfies, Pitchfork Vice ugh Pinterest single-origin coffee salvia asymmetrical Carles hella. Fap single-origin coffee freegan, narwhal Helvetica you probably haven't heard of them lomo Banksy small batch drinking vinegar Shoreditch Brooklyn Blue Bottle. Letterpress iPhone keytar, 90's ennui Portland organic street art salvia selfies stumptown 8-bit.<br><br>

      Seitan roof party readymade, Intelligentsia chambray Wes Anderson authentic umami. Polaroid Shoreditch organic, wolf sustainable squid Brooklyn quinoa yr slow-carb Godard you probably haven't heard of them meh American Apparel. Church-key readymade Brooklyn Pinterest, Tonx art party brunch cray pour-over authentic. Meh seitan craft beer squid. Skateboard Odd Future paleo twee Tonx, retro pop-up typewriter seitan church-key swag locavore flannel. Distillery put a bird on it Tonx, Bushwick pickled Helvetica selvage brunch fap messenger bag sustainable pork belly. Banh mi ethnic craft beer Thundercats, small batch VHS 3 wolf moon tote bag polaroid Vice bicycle rights whatever Odd Future.<br><br>

      Pug readymade meggings pour-over yr, 8-bit blog distillery iPhone flannel. Mlkshk narwhal lo-fi craft beer paleo cliche. American Apparel retro normcore +1 chia small batch. Cosby sweater lomo mlkshk Blue Bottle bespoke locavore. Flexitarian hoodie tofu, Godard Etsy pug YOLO direct trade keffiyeh cred flannel mumblecore. Cornhole semiotics Portland Intelligentsia Odd Future 90's twee. Odd Future Godard Portland, sriracha mlkshk next level bespoke narwhal small batch disrupt fanny pack ethnic slow-carb retro.<br><br>

      Seitan roof party readymade, Intelligentsia chambray Wes Anderson authentic umami. Polaroid Shoreditch organic, wolf sustainable squid Brooklyn quinoa yr slow-carb Godard you probably haven't heard of them meh American Apparel. Church-key readymade Brooklyn Pinterest, Tonx art party brunch cray pour-over authentic. Meh seitan craft beer squid. Skateboard Odd Future paleo twee Tonx, retro pop-up typewriter seitan church-key swag locavore flannel. Distillery put a bird on it Tonx, Bushwick pickled Helvetica selvage brunch fap messenger bag sustainable pork belly. Banh mi ethnic craft beer Thundercats, small batch VHS 3 wolf moon tote bag polaroid Vice bicycle rights whatever Odd Future.<br><br>

      Pug readymade meggings pour-over yr, 8-bit blog distillery iPhone flannel. Mlkshk narwhal lo-fi craft beer paleo cliche. American Apparel retro normcore +1 chia small batch. Cosby sweater lomo mlkshk Blue Bottle bespoke locavore. Flexitarian hoodie tofu, Godard Etsy pug YOLO direct trade keffiyeh cred flannel mumblecore. Cornhole semiotics Portland Intelligentsia Odd Future 90's twee. Odd Future Godard Portland, sriracha mlkshk next level bespoke narwhal small batch disrupt fanny pack ethnic slow-carb retro.<br><br>
    
      Master cleanse PBR&B pork belly, Brooklyn sriracha narwhal asymmetrical Intelligentsia fingerstache flexitarian leggings cardigan ennui. Bespoke gastropub mustache XOXO Truffaut street art. Fingerstache tofu Truffaut vinyl gluten-free, Helvetica salvia. Chia swag High Life mixtape. Pork belly occupy cardigan, readymade selvage gluten-free Godard asymmetrical. Roof party artisan single-origin coffee, next level Bushwick wolf swag narwhal pork belly sriracha post-ironic. PBR mustache readymade skateboard paleo cray Thundercats, normcore you probably haven't heard of them messenger bag four loko narwhal photo booth DIY seitan.
    </p>
  </div>
<div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800);

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }
.clearfix { display: block; }

body {
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
}

.header,
.footer {
  background: #222;
  color: #a7a7a7;
  width: 100%;
  height: 4em;
  line-height: 4em;
  padding: 0 .5em;
}

.footer {
  text-align: center;
}

.footer-item {
  display: inline-block;
  padding-right: .5em;
}

#site-title:hover,
a .footer-item:hover {
  color: #33a1de;
  cursor: pointer;
}

#site-title {
  font-size: 1.75em;
  font-weight: bold;
  cursor: default;
}

.menu {
  position: relative;
  background: #333;
  color: #f7f7f7;
  float: left;
  width: 100%;
}

.menu-item {
  float: left;
  width: 50%;
  height: 3em;
  line-height: 3em;
  text-align: center;
}

a .menu-item:hover{
  background: #444;
  cursor: pointer;
}

#menu-icon {
  width: 2.5em;
  line-height: 2.5em;
  float: right;
  cursor: pointer;
}

#menu-icon img {
  width: 100%;
  margin-top: .6em;
}

.content {
  position: relative;
  float: left;
  width: 100%;
  padding: 1em;
}

.selected {
  border-top: 4px solid #33a1de;
  border-left: none;
  background: #444;
}

.items{
  width: 100%;
}

.show .items,
.show .footer{
  display: inline-block;
}

.hide .items,
.hide .footer {
  display: none;
}

.content-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 62em;
}

@media only screen and (min-width: 48em) {
  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 30%;
  }
  .menu-item {
    width: 100%;
  }
  .footer {
    position: absolute;
    bottom: 0;
  }
  .items {
    position: absolute;
    top: 4em;
    bottom: 4em;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .selected {
    border-top: none;
    border-left: 7px solid #33a1de;
    border-right: 7px solid #444;
  }
  .menu.hide{
    width: 3.5em;
  }
  .menu.hide #site-title{
    display: none;
  }
  .menu.hide #menu-icon{
    visibility: visible;
    float: left;
  }
  .content {
    margin-left: 30%;
    width: 70%;
  }
  .menu.hide ~ .content {
    margin-left: 7%;
    width: 93%;
  }
}

@media only screen and (min-width: 78em) {
  .menu {
    position: fixed;
    width: 20%;
  }
  .menu-item {
    width: 100%;
  }
  .content {
    margin-left: 20%;
    width: 80%;
  }
  .menu.hide ~ .content {
    margin-left: 4%;
    width: 96%;
  }
}
            
          
!
            
              $('.menu-item').click( function() {
  $('.menu-item').removeClass('selected');
  $(this).addClass('selected');
});

$('#menu-icon img').hover(
  function() {
    $('#menu-icon img').attr( "src", "https://goo.gl/9Xife2" );
  },function() {
    $('#menu-icon img').attr( "src", "https://goo.gl/3hQUbp" );
  }
);

$('#menu-icon img').click( function(){
  if( $('.menu').hasClass('hide') ) {
    $('.menu').removeClass('hide');
    $('.menu').addClass('show');
  }
  else{
    $('.menu').addClass('hide');
    $('.menu').removeClass('show');
  }
});
            
          
!
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.
Loading ..................

Console