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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div class=" logo ">
  <span class=" icon icon--logo-m "></span>
</div>

<nav class=" menu " hidden>
  <ul class=" menu--list ">
    <li class=" menu__list--item is-first " title="Go home">
      <span class=" icon icon--logo-m is-overriden "></span>
      <a href="#">Home</a>
    </li>
    <li class=" menu__list--item " title="View your profile">
      <span class=" user-avatar ">
        <!-- WebP FTW! -->
        <img src="http://db.tt/GP3CSQDz" />
      </span>
      <a href="#">Rafael Rinaldi</a>
    </li>
    <li class=" menu__list--item " title="New post">
      <span class=" icon icon--new-post "></span>
      <span class=" icon icon--settings is-right is-big "></span>
      <a href="#">New Post</a>
    </li>
    <li class=" menu__list--item " title="View your drafts">
      <span class=" icon icon--draft "></span>
      <a href="#">Drafts</a>
    </li>
    <li class=" menu__list--item " title="View your reading list">
      <span class=" icon icon--reading-list "></span>
      <a href="#">Reading List</a>
    </li>
    <li class=" menu__list--item is-last " title="View your activity">
      <span class=" icon icon--activity "></span>
      <span class=" badge is-right ">10</span>
      <a href="#">Activity</a>
    </li>
  </ul>
</nav>
              
            
!

CSS

              
                @import compass

@import compass/css3

// Font stuff  
@import "http://db.tt/Gl73HGYI"

// Colors
$color-dark: #333332
$color-very-dark: #232323
$color-highlight: #52a463

$logo-width: 50px
$logo-height: 45px
$logo-border: 5px

$menu-width: 210px
$menu-height: 270px

$menu-item-width: 195px
$menu-item-height: 30px
$menu-item-color: #b3b3b1
$menu-item-font-size: 12px
$menu-item-padding: 15px

$icon-size: 16px
$icon-size-big: 18px

$badge-size: 16px

$user-avatar-border: 2px

// Font smoothing
$fs: antialiased

// Border radius
$br: 5px

body
  -moz-font-smoothing: $fs
  -webkit-font-smoothing: $fs
  font-smoothing: $fs
  margin: 10px
  padding: 0
  // WebP FTW!
  background: url(http://db.tt/awdlVCUb) no-repeat
  background-size: cover
  
.menu
  position: absolute
  float: left
  width: $menu-width
  height: $menu-height
  
.menu--list
  float: left
  padding: 0
  margin: 0
  
.menu__list--item
  cursor: pointer
  color: $menu-item-color
  background: $color-dark
  width: $menu-item-width
  height: $menu-item-height
  list-style: none
  font-family: 'Medium Menu Bold'
  font-size: $menu-item-font-size
  padding-left: $menu-item-padding
  padding-top: $menu-item-padding
  border-bottom: 1px solid rgba(white, .1)
    
  &.is-active
    color: white
    
  &.is-first
    +border-top-right-radius($br)
    +border-bottom-left-radius(0)
    
  &.is-last
    +border-bottom-right-radius($br)
    +border-bottom-left-radius($br)
    border-bottom: transparent
      
  &:hover
    background: $color-very-dark

  & a
    margin-left: 10px
    text-decoration: none
    color: inherit
        
.icon
  display: block
  float: left
  width: $icon-size
  height: $icon-size
  line-height: $icon-size
  font-family: 'Medium Icons'
  font-style: normal
  font-weight: 400
  font-size: 16px
  text-align: center
  text-decoration: none
  text-rendering: optimizeLegibility
  vertical-align: middle

// Item badge
.badge
  font-family: 'Medium Menu Bold'
  padding: 1px
  display: block
  width: $badge-size
  height: $badge-size
  line-height: $badge-size
  text-align: center
  color: white
  background: $color-highlight
  +border-radius(2px)

// To compensate the little difference between the logo and the menu
.icon--logo-m
  &.is-overriden
    margin-left: 2px
    margin-top: -1px
  
.user-avatar
  @extend .icon
  overflow: hidden
  border: $user-avatar-border solid $menu-item-color
  +border-radius(100%)
  
  & img
    width: inherit
    height: inherit
      
.logo
  position: absolute
  width: $logo-width
  height: $logo-height
  line-height: $logo-height
  color: white
  background: $color-very-dark
  opacity: .95
  border-bottom: $logo-border solid $color-highlight
  > *
    display: block
    width: inherit
    height: inherit
    line-height: inherit
    text-align: center
    vertical-align: middle

// Global states
.is-right
  float: right
  margin-right: 10px
  
.is-big
  font-size: $icon-size-big
              
            
!

JS

              
                /*
@author Rafael Rinaldi (rafaelrinaldi.com)
@date Sep 15, 2013
*/
(function($) {
  
  var logo = $('.logo'),
      menu = $('.menu'),
      items = $('.menu__list--item'),
      activeItem = null;
  
  // Setting up event listeners
  logo.mouseover(logoHandler);
  menu.mouseleave(menuHandler);
  items.mouseover(itemsHandler);
  
  // Logo handler
  function logoHandler( event ) {
    event.preventDefault();
    event.stopPropagation();
    
    logo.hide();
    menu.show();
    
    return false;
  }
  
  // Menu event handler
  function menuHandler( event ) {
    event.preventDefault();
    event.stopPropagation();
    
    logo.show();
    menu.hide();
    
    return false;
  }
  
  // Menu list items event handler
  function itemsHandler( event ) {
    event.preventDefault();
    event.stopPropagation();
    
    if(!!activeItem) {
      activeItem.removeClass('is-active');
    }
        
    activeItem = $(event.currentTarget);
    activeItem.addClass('is-active');
    
    return false;
  }
  
})(jQuery);
              
            
!
999px

Console