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

              
                <h1 class="title">Compact Social Bar</h1>
<p class="desc">Because not everyone needs <em>all</em> your social networks, no?</p>

<div class="iconbar">
  <div class="iconbar__container">
    <!-- Start by putting the main icons first. These are the primary ones and the ones your audience mostly use -->
    <a href="https://github.com/diagramatics" class="iconbar__link iconbar__link--github"><i class="icon fa fa-github"></i></a>
    <a href="https://twitter.com/diagramatics" class="iconbar__link iconbar__link--twitter"><i class="icon fa fa-twitter"></i></a>
    <a href="mailto:ohai@diagramatics.me" class="iconbar__link iconbar__link--email"><i class="icon fa fa-envelope"></i></a>
    <!-- Put the rest of the icons in another div so we can target them using the nth-of-type method without accidentally targeting the main icons -->
    <!-- Don't forget to add the count of the icons on the .scss file on variable $icon-more-count -->
    <div class="iconbar__more">
      <a href="https://www.facebook.com/diagramatics" class="iconbar__link iconbar__link--outside iconbar__link--facebook"><i class="icon fa fa-facebook-square"></i></a>
      <a href="http://diagramatics.me" class="iconbar__link iconbar__link--outside iconbar__link--web"><i class="icon fa fa-globe"></i></a>
      <a href="https://google.com/StevenSinatra" class="iconbar__link iconbar__link--outside iconbar__link--google-plus"><i class="icon fa fa-google-plus-square"></i></a>
      <a href="https://linkedin.com/in/diagramatics" class="iconbar__link iconbar__link--outside iconbar__link--linkedin"><i class="icon fa fa-linkedin-square"></i></a>
      <a href="http://reddit.com/u/diagramatics" class="iconbar__link iconbar__link--outside iconbar__link--reddit"><i class="icon fa fa-reddit-square"></i></a>
      <a href="http://instagr.am/diagramatics" class="iconbar__link iconbar__link--outside iconbar__link--instagram"><i class="icon fa fa-instagram"></i></a>
    </div><!-- .iconbar__more -->
  </div><!-- .iconbar__container -->
</div><!-- .iconbar -->

<small><strong>Tip:</strong> hover.</small>
<p class="explanation"><small>This concept is a UI concept to highlight one's need to show a lot of social media preferences or share buttons on the page. It hides clutter of showing all of them and helps the user to be able to see a range of selections without annoying them to re-move the cursor when they wanted to choose the main ones.</small></p>
              
            
!

CSS

              
                $icon-size: 48px;
$icon-padding: 5px;
$icon-size-total: $icon-size + $icon-padding;
$icon-more-count: 6;
$icon-transition-length: .4s;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 300px;
  margin: auto;
  background: #f8f8f8;
  color: #222;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
}

.title,
.desc {
  margin: 0;
}

.title {
  color: lighten(#f40924, 15%);
  font-size: 3rem;
  font-weight: 300;
}

.explanation {
  max-width: 500px;
  margin: 1em auto;
}

.iconbar {
  margin: 20px 0;
  text-align: center;
  
  &:hover {
    .iconbar__link--outside {
      opacity: 1;
    }
  }
}

.iconbar__container {
  display: inline-block;
  position: relative;
}

.iconbar__link {
  color: inherit;
  text-decoration: none;
}

.icon {
  width: $icon-size-total;
  padding: $icon-padding;
  font-size: 3em;
}

// Colors!
.iconbar__link {
  transition: all .3s;
  
  &--github:hover {
    color: #333;
  }
  
  &--twitter:hover {
    color: #55acee;
  }
  
  &--email:hover {
    color: #4285f4;
  }
  
  &--facebook:hover {
    color: #3b5999;
  }
  
  &--google-plus:hover {
    color: #dd4b39;
  }
  
  &--instagram:hover {
    color: #3f729b;
  }
  
  &--reddit:hover {
    color: #ff4500;
  }
  
  &--linkedin:hover {
    color: #0976b4;
  }
  
  &--web:hover {
    color: #f40924;
  }
}

.iconbar__link--outside {
  display: inline-block;
}

.iconbar__link--outside {
  position: absolute;
  top: 0;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity $icon-transition-length, transform $icon-transition-length cubic-bezier(.3, .15, 0, 1.3), color $icon-transition-length 0;
  
  &:nth-of-type(2n-1) {
    right: 100%;
  }
  
  &:nth-of-type(2n) {
    left: 100%;
  }
}

@for $i from 1 through $icon-more-count {
  .iconbar__link--outside:nth-of-type(#{$i}) {
    // NOTE: There are three transitions. One on opacity, one on transform, one on color. Color HAS TO STAY 0 or the color transition will be delayed, perhaps significantly.
    // The outermost icons will disappear first on hovering out
    transition-delay: ($icon-more-count - ($i - 1)) * .1s - .1s, ($icon-more-count - ($i - 1)) * .1s, 0;
    // But when hovering in, the innermost icons will appear first
    .iconbar:hover & {
      transform: translateY(0);
      transition-delay: ($i - 1) * ($icon-transition-length / 4) - .1s, ($i - 1) * ($icon-transition-length / 4), 0;
    }
    
    // Use modulo (%) to get even and odd numbers
    // Give the first left and right elements some added margin of the calculation of 4px to mimic the invisible margin inline-block elements have
    @if ($i % 2 == 0) {
      // Even ones, scattered on the right
      margin-left: (floor(($i - 1)/2)) * $icon-size-total + 6px;
    }

    @else {
      // Odd ones, scattered on the left
      margin-right: (floor(($i - 1)/2)) * $icon-size-total + 6px;
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console