"social nav"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mavrK/pen/mPPWGN?limit=all&page=20&q=social" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600"); * { -webkit-transition: 0.33s ease; transition: 0.33s ease; } body { background-color: #9ab; } .rela-block { display: block; position: relative; overflow: hidden; } .side-bar { z-index: 100; position: fixed; width: 80px; top: 0; bottom: 0; left: 0; background-color: #fff; box-shadow: 4px 0px 25px -1px rgba(0,0,0,0.5); font-family: "Raleway"; font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; -webkit-transition: 0.33s ease; transition: 0.33s ease; } .side-bar:hover { width: 250px; } .side-bar:hover .side-button::before { left: 6%; -webkit-transition: 0.33s ease, left 0.25s 0.15s ease; transition: 0.33s ease, left 0.25s 0.15s ease; } .side-bar:hover .hover-svg { height: 130px; width: 130px; } .side-container { position: absolute; width: 100%; } .side-container.top { height: 20%; top: 1%; } .side-container.middle { padding-top: 10px; height: 65%; top: 55%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hover-svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 80px; width: 80px; fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 2; cursor: pointer; -webkit-transition: 0s ease, height 0.33s ease, width 0.33s ease; transition: 0s ease, height 0.33s ease, width 0.33s ease; } .hover-svg:hover { stroke: #000; } .side-button { height: 15%; margin: 5px 0; background-color: #e4e9e9; cursor: pointer; } .side-button:hover { background-color: #c4c9c9; } .side-button::before { position: absolute; top: 50%; left: -250px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.33s ease; transition: 0.33s ease; } .side-button::after { content: ""; position: absolute; height: 40px; width: 40px; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: cover !important; -webkit-transition: 0.33s ease; transition: 0.33s ease; } .side-button.facebook::before { content: "Facebook"; } .side-button.facebook:after { background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center; } .side-button.twitter::before { content: "Twitter"; } .side-button.twitter:after { background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Twitter-07-128.png") no-repeat center; } .side-button.instagram::before { content: "Instagram"; } .side-button.instagram:after { background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Instagram-128.png") no-repeat center; } .side-button.soundcloud::before { content: "Soundcloud"; } .side-button.soundcloud:after { background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_SoundCloud-128.png") no-repeat center; } .side-button.linked-in::before { content: "LinkedIn"; } .side-button.linked-in:after { background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_LinkedIn-128.png") no-repeat center; } .side-button.pinterest::before { content: "Pinterest"; } .side-button.pinterest:after { background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center; } .plus-button { position: absolute; bottom: 30px; right: 30px; z-index: 100; height: 75px; width: 75px; border-radius: 100%; background-color: #e91e63; box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(0.92); transform: scale(0.92); } .plus-button::before { content: "+"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 28px; font-weight: 600; } .plus-button:hover { -webkit-transform: scale(1); transform: scale(1); box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5); } .plus-button:active { -webkit-transform: scale(0.96); transform: scale(0.96); box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53); } .plus-button.open { -webkit-transform: rotate(45deg) scale(0.92); transform: rotate(45deg) scale(0.92); background-color: #333; box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58); } .plus-button.open:hover { -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5); } .plus-button.open:active { -webkit-transform: scale(0.96) rotate(45deg); transform: scale(0.96) rotate(45deg); box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53); } .social-button { position: absolute; bottom: 43px; right: 41px; height: 50px; width: 50px; -webkit-transform: scale(0.8); transform: scale(0.8); background-size: 153% !important; border-radius: 100%; box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.4); cursor: pointer; z-index: 99; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .social-button:hover { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5); transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5); } .social-button.twitter-button { background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center; } .social-button.twitter-button.active { bottom: 110px; right: 21px; } .social-button.facebook-button { background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center; } .social-button.facebook-button.active { bottom: 105px; right: 73px; } .social-button.pinterest-button { background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center; } .social-button.pinterest-button.active { bottom: 67px; right: 109px; } .social-button.insta-button { background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center; } .social-button.insta-button.active { bottom: 15px; right: 105px; } </style></head><body> <div class="side-bar"> <div class="side-container top"> <svg viewbox="0 0 120 120" class="hover-svg"> <path D="M 60 25 L 20 95 L 100 95 Z"/> <path D="M 36 67 L 53 95"/> <path D="M 33 72 L 47 95"/> <path D="M 30 78 L 41 95"/> <path D="M 27 83 L 35 95"/> </svg> </div> <div class="side-container middle"> <div class="rela-block side-button facebook"></div> <div class="rela-block side-button twitter"></div> <div class="rela-block side-button instagram"></div> <div class="rela-block side-button soundcloud"></div> <div class="rela-block side-button linked-in"></div> <div class="rela-block side-button pinterest"></div> </div> </div> <div class="plus-button"></div> <div class="social-button twitter-button"></div> <div class="social-button facebook-button"></div> <div class="social-button pinterest-button"></div> <div class="social-button insta-button"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(document).ready(function(){ // Social plus button function $('.plus-button').click(function(){ $(this).toggleClass('open'); $('.social-button').toggleClass('active'); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: