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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                .page
    a.control-menu(href="#").close
      .fa.fa-bars
      .fa.fa-times
    .menu-wrapper
        .menu
            a.element.one(href="#")
                .element-wrapper
                    i.icon.fa.fa-camera
                    span.tag portfolio
                    .loading loading
            a.element.two(href="#")
                .element-wrapper
                    i.icon.fa.fa-coffee
                    span.tag coffee
            a.element.three(href="#")
                .element-wrapper
                    i.icon.fa.fa-heart
                    span.tag love
            a.element.four(href="#")
                .element-wrapper
                    i.icon.fa.fa-dribbble
                    span.tag dribbble
                      small I wouldn't mind an invite
              
            
!

CSS

              
                html, body
  height: 100%
  background: #313
  font-family: lato, sans-serif
  font-weight: 400
  width: 100%
  overflow: hidden
  
.page
  position: relative
  height: 100%

.control-menu
  position: absolute
  font-size: 24px
  top: 10px
  border-radius: 24px
  right: 10px
  color: white
  z-index: 200
  text-decoration: none
  .fa
    width: 32px
    height: 32px
    display: block
    line-height: 32px
    border-radius: 32px
    text-align: center
  &.open
    .fa-bars
      display: block
    .fa-times
      display: none
  &.close
    .fa-bars
      display: none
    .fa-times
      display: block
      background-color: #666

.menu
  width: 100%
  float: left
  overflow: hidden
  position: relative
  transition: all .3s ease
  height: 100%
    
.menu-wrapper
  transition: all .3s ease
  height: 100%
  
.menu.closed
  transform: translateX(100%) scale(.6) !important
  transform-origin: top right
  transition: all .4s ease

.element
  display: block
  height: 25% 
  width: 100%
  font-size: 32px
  text-align: center
  color: white
  display: table
  text-decoration: none
  transition: all .3s

  &.one
    background-color: #F1C40F
  &.two
    background-color: #E67E22
  &.three
    background-color: #E74C3C
  &.four
    background-color: #E30E82
  .element-wrapper
    display: table-cell
    vertical-align: middle
    position: relative
  .icon
    display: block
  .tag
    display: block
    padding-top: 10px
    font-size: 28px
    text-decoration: none
    opacity: 0
    height: 0
    text-transform: uppercase
    transform: translateY(200px)
    width: 100%
  .loading
    height: 0
    opacity: 0

.element.element--closed
  height: 0%
  overflow: hidden
  display: block
  *
    opacity : 0
    transition: all 1s ease
    
.element.element--active
  font-size: 64px
  transition: all .3s
  height: 100%
    
  .tag
    opacity: 1
    height: 100px
    transform: translateY(0)
    transition: all .2s .3s ease
    
    small
      font-size: .4em
      display: block
              
            
!

JS

              
                var menu = (function() {
  'use strict';

  function elementController(){

    $('.element').on('click', function(){

      var $this = $(this),
        height = $this.height(),
        i = $this.index()

      if($this.hasClass('element--active')){

        $this
          .removeClass('element--active')
          .siblings()
            .removeClass('element--closed');

      } else {

        $this
          .addClass('element--active')
          .siblings()
            .addClass('element--closed');

      }

      return false;

    });

  }

  function bindUI(){


    $('.control-menu').on('click', function(){

      $(this)
        .toggleClass('open')
        .toggleClass('close');

      $('.menu')
        .toggleClass('closed');

    });

    elementController();

  }

  function init() {

    bindUI();
 
  }

  return {
    init:init
  };

}());

$(function(){

  menu.init();

})
              
            
!
999px

Console