Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="nav">
  <input class="nav__trigger-input" type="checkbox" id="trigger" aria-label="open the navigation"/>
  <label class="nav__trigger-finger" for="trigger">
    <span></span>
  </label>
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#hoi" class="nav__link">
        <span class="nav__text">
          Work
        </span>
      </a>
    </li>
    <li class="nav__item">
      <a href="#hoi" class="nav__link">
        <span class="nav__text">
          About
        </span>
      </a>
      <input class="nav__submenu-trigger-input" type="checkbox" id="submenu-trigger" />
      <label class="nav__submenu-trigger-finger" for="submenu-trigger"></label>
      <ul class="nav__list-child">
        <li class="nav__item">
          <a href="#hoi" class="nav__link">
            <span class="nav__text">
              About me
            </span>
          </a>
        </li>
        <li class="nav__item">
          <a href="#hoi" class="nav__link">
            <span class="nav__text">
              About meerkats
            </span>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav__item">
      <a href="#hoi" class="nav__link">
        <span class="nav__text">
          Blog
        </span>
      </a>
    </li>
    <li class="nav__item">
      <a href="#hoi" class="nav__link">
        <span class="nav__text">
          Contact
        </span>
      </a>
    </li>
  </ul>
</nav>

<main>
  <h1>
    Fold out menu with <span>css only</span>;
  </h1>
  <p>
    Lorem ipsum dolor amet gochujang raw denim kogi cloud bread poke lo-fi typewriter cardigan banjo. Activated charcoal letterpress hashtag yuccie. Tote bag blog YOLO vexillologist, hashtag yuccie poke chartreuse succulents hell of hot chicken taxidermy shaman biodiesel. Mustache edison bulb cray ugh everyday carry ethical banjo helvetica forage you probably haven't heard of them fanny pack tacos.
  </p>
  <p>
    Flexitarian PBR&B taxidermy prism mumblecore microdosing lyft YOLO pug williamsburg fashion axe small batch palo santo. Sustainable wayfarers poke enamel pin. Iceland skateboard whatever, pop-up forage ramps vexillologist scenester af trust fund la croix everyday carry raclette fingerstache fashion axe. Offal flannel selvage yuccie kale chips blue bottle tattooed hella typewriter skateboard hoodie shabby chic poke. Adaptogen pop-up gluten-free neutra ennui cronut gentrify whatever post-ironic.
  </p>
</main>
              
            
!

CSS

              
                $bezier: cubic-bezier(0.75, 0, 0.25, 1);

* {
  margin: 0;
  box-sizing: border-box;
  font-family: HelveticaNeue, Helvetica, sans-serif;
}

.nav {
  color: white;
  &__trigger-finger {
    // The visible part of the trigger, this will be your "nav is closed!"-state
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    width: 15px;
    height: 10px;
    margin: 40px;
    color: hotpink;
    &::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      bottom: -5px;
      right: -5px;
      background: hotpink;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.3s $bezier;
    }
    span {
      display: block;
      width: 100%;
      height: 2px;
      transition: transform 1s $bezier;
      background: currentColor;
      &::before,
      &::after {
        // Create the hamburger lines
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        display: block; // Labels are inline elements, it needs a display property that allows it it's own set height like block;
        height: 2px;
        background: currentColor; // inherits color set on parent
        transition: transform 0.4s $bezier, top 0.4s 0.4s $bezier, background 0.2s $bezier;
      }
      &::before {
        top: 0;
      }
      &::after {
        top: calc(100% - 2px);
      }
    }
  }
  &__trigger-input, &__submenu-trigger-input {
    // We  want to make the input invisible without using display: none;, because that will remove functionality.
    opacity: 0;
    width: 0;
    height: 0;
    appearance: none;
    position: fixed;
  }
  &__trigger-input {
    &:focus {
      & + label {
        color: white;
        &::before {
          opacity: 1;
        }
      }
    }
    &:checked {
      & + label {
        // change the label if the input is checked, this will be your "nav is open! 🎉"-state
        height: 10px;
        color: white;        
        span {
          transform: rotate(45deg);
          &::before, &::after {
            top: calc(50% - 1px);
            transition: transform 0.4s 0.4s $bezier, top 0.4s $bezier, background 0.2s $bezier;
          }
          &::after {
            transform: rotate(90deg);
          }          
        }
      }
      & ~ ul {
        // We use a general sibling because it's less work, + label + ul would work as well
        z-index: 9;
        transform: none;
        transition: 0.5s $bezier;
      }
    }
  }
  &__list {
    // we want to make the top navigation items not visible while the input is not :checked.
    position: fixed;
    overflow-y: scroll;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: hotpink;
    font-size: 4rem;
    
    padding: 40px;
    transform: translate(100vw) rotate(45deg);
    transition: 0.2s $bezier;
  }
  &__item {
    list-style: none;
    & + & {
      margin-top: 20px;
    }
  }
  &__submenu-trigger-input {
    &:checked {
      & + label::after {
        transform: translateY(10px);
      }
      & ~ ul {
        display: block;
      }
    }
    &:focus {
      & + label::after {
        transform: translateY(5px);
      }
    }
  }
  &__submenu-trigger-finger {
    &::after {
      content: '';
      display: inline-block;
      border: 10px solid transparent;
      border-top-color: white;
      transition: 0.4s $bezier;
    }
  } 
  &__link {
    text-decoration: none;
    color: inherit;
  }
  &__list-child {
    display: none;
    font-size: 2rem;
    margin-top: 10px;
    padding-left: 2rem;
  }
}

main {
  padding: 6rem 4rem;
  h1 {
    font-size: 3rem;
    font-weight: normal;
    span {
      color: hotpink;
    }
  }  
  p {
    line-height: 1.5;
    margin-top: 1.5rem;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console