<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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>
*,
*: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: #f95164;
font-size: 3rem;
font-weight: 300;
}
.explanation {
max-width: 500px;
margin: 1em auto;
}
.iconbar {
margin: 20px 0;
text-align: center;
}
.iconbar:hover .iconbar__link--outside {
opacity: 1;
}
.iconbar__container {
display: inline-block;
position: relative;
}
.iconbar__link {
color: inherit;
text-decoration: none;
}
.icon {
width: 53px;
padding: 5px;
font-size: 3em;
}
.iconbar__link {
-webkit-transition: all .3s;
transition: all .3s;
}
.iconbar__link--github:hover {
color: #333;
}
.iconbar__link--twitter:hover {
color: #55acee;
}
.iconbar__link--email:hover {
color: #4285f4;
}
.iconbar__link--facebook:hover {
color: #3b5999;
}
.iconbar__link--google-plus:hover {
color: #dd4b39;
}
.iconbar__link--instagram:hover {
color: #3f729b;
}
.iconbar__link--reddit:hover {
color: #ff4500;
}
.iconbar__link--linkedin:hover {
color: #0976b4;
}
.iconbar__link--web:hover {
color: #f40924;
}
.iconbar__link--outside {
display: inline-block;
}
.iconbar__link--outside {
position: absolute;
top: 0;
opacity: 0;
-webkit-transform: translateY(15px);
transform: translateY(15px);
-webkit-transition: opacity 0.4s, color 0.4s 0, -webkit-transform 0.4s cubic-bezier(0.3, 0.15, 0, 1.3);
transition: opacity 0.4s, color 0.4s 0, -webkit-transform 0.4s cubic-bezier(0.3, 0.15, 0, 1.3);
transition: opacity 0.4s, transform 0.4s cubic-bezier(0.3, 0.15, 0, 1.3), color 0.4s 0;
transition: opacity 0.4s, transform 0.4s cubic-bezier(0.3, 0.15, 0, 1.3), color 0.4s 0, -webkit-transform 0.4s cubic-bezier(0.3, 0.15, 0, 1.3);
}
.iconbar__link--outside:nth-of-type(2n-1) {
right: 100%;
}
.iconbar__link--outside:nth-of-type(2n) {
left: 100%;
}
.iconbar__link--outside:nth-of-type(1) {
-webkit-transition-delay: 0.5s, 0.6s, 0;
transition-delay: 0.5s, 0.6s, 0;
margin-right: 6px;
}
.iconbar:hover .iconbar__link--outside:nth-of-type(1) {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: -0.1s, 0s, 0;
transition-delay: -0.1s, 0s, 0;
}
.iconbar__link--outside:nth-of-type(2) {
-webkit-transition-delay: 0.4s, 0.5s, 0;
transition-delay: 0.4s, 0.5s, 0;
margin-left: 6px;
}
.iconbar:hover .iconbar__link--outside:nth-of-type(2) {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0s, 0.1s, 0;
transition-delay: 0s, 0.1s, 0;
}
.iconbar__link--outside:nth-of-type(3) {
-webkit-transition-delay: 0.3s, 0.4s, 0;
transition-delay: 0.3s, 0.4s, 0;
margin-right: 59px;
}
.iconbar:hover .iconbar__link--outside:nth-of-type(3) {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0.1s, 0.2s, 0;
transition-delay: 0.1s, 0.2s, 0;
}
.iconbar__link--outside:nth-of-type(4) {
-webkit-transition-delay: 0.2s, 0.3s, 0;
transition-delay: 0.2s, 0.3s, 0;
margin-left: 59px;
}
.iconbar:hover .iconbar__link--outside:nth-of-type(4) {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0.2s, 0.3s, 0;
transition-delay: 0.2s, 0.3s, 0;
}
.iconbar__link--outside:nth-of-type(5) {
-webkit-transition-delay: 0.1s, 0.2s, 0;
transition-delay: 0.1s, 0.2s, 0;
margin-right: 112px;
}
.iconbar:hover .iconbar__link--outside:nth-of-type(5) {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0.3s, 0.4s, 0;
transition-delay: 0.3s, 0.4s, 0;
}
.iconbar__link--outside:nth-of-type(6) {
-webkit-transition-delay: 0s, 0.1s, 0;
transition-delay: 0s, 0.1s, 0;
margin-left: 112px;
}
.iconbar:hover .iconbar__link--outside:nth-of-type(6) {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0.4s, 0.5s, 0;
transition-delay: 0.4s, 0.5s, 0;
}