<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; }