CSS Social Media Sidebar
Social media is a main part of the internet these days, so today we will show you how to create a simple css social media sidebar using only css code. The example will create a sidebar positioned on the left hand side of the page and the position will be fixed, meaning that when the user scrolls the page, the sidebar will remain in the same position.
In this example we will be using the entypo font from http://weloveiconfonts.com/, this font has many social media icons. We have used 9 sites, but you can add or remove any social media icon with ease.
Lets get down to the code, first off will be the html code that we have used.
<aside id="sticky-social">
<ul>
<li><a href="#" class="entypo-facebook" target="_blank" rel="noopener"><span>Facebook</span></a></li>
<li><a href="#" class="entypo-twitter" target="_blank" rel="noopener"><span>Twitter</span></a></li>
<li><a href="#" class="entypo-gplus" target="_blank" rel="noopener"><span>Google+</span></a></li>
<li><a href="#" class="entypo-linkedin" target="_blank" rel="noopener"><span>LinkedIn</span></a></li>
<li><a href="#" class="entypo-instagrem" target="_blank" rel="noopener"><span>Instagram</span></a></li>
<li><a href="#" class="entypo-stumbleupon" target="_blank" rel="noopener"><span>StumbleUpon</span></a></li>
<li><a href="#" class="entypo-pinterest" target="_blank" rel="noopener"><span>Pinterest</span></a></li>
<li><a href="#" class="entypo-flickr" target="_blank" rel="noopener"><span>Flickr</span></a></li>
<li><a href="#" class="entypo-tumblr" target="_blank" rel="noopener"><span>Tumblr</span></a></li>
</ul>
</aside>
The code above is pretty straight forward, as can be seen, we have used the ul unordered tag to display our social media sidebar. We have left off some html code from the project as it’s not relevant to for the actual sidebar, you can see all the code on our demo page here.
The following css code will be used to style our page and sidebar.
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: "entypo", sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
padding: 20px 50px;
background: white;
}
#sticky-social {
left: 0;
position: fixed;
top: 150px;
}
#sticky-social a {
background: #333;
color: #fff;
display: block;
height: 35px;
font: 16px "Open Sans", sans-serif;
line-height: 35px;
position: relative;
text-align: center;
width: 35px;
}
#sticky-social a span {
line-height: 35px;
left: -120px;
position: absolute;
text-align:center;
width:120px;
}
#sticky-social a:hover span {
left: 100%;
}
#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span { background: #3b5998; }
#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span { background: #00aced; }
#sticky-social a[class*="gplus"],
#sticky-social a[class*="gplus"]:hover,
#sticky-social a[class*="gplus"] span { background: #dd4b39; }
#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span { background: #007bb6; }
#sticky-social a[class*="instagrem"],
#sticky-social a[class*="instagrem"]:hover,
#sticky-social a[class*="instagrem"] span { background: #517fa4; }
#sticky-social a[class*="stumbleupon"],
#sticky-social a[class*="stumbleupon"]:hover,
#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }
#sticky-social a[class*="pinterest"],
#sticky-social a[class*="pinterest"]:hover,
#sticky-social a[class*="pinterest"] span { background: #cc2127; }
#sticky-social a[class*="flickr"],
#sticky-social a[class*="flickr"]:hover,
#sticky-social a[class*="flickr"] span { background: #ff0084; }
#sticky-social a[class*="tumblr"],
#sticky-social a[class*="tumblr"]:hover,
#sticky-social a[class*="tumblr"] span { background: #32506d; }We’ll have a look at a few key points of the above css code to see how it all works.
ul – Here will set the list-style to none to remove bullets.
#sticky-social – This rule will set the position to fixed, display the sidebar on the left and 150px from the top of the page.
#sticky-social a – This is where we style the individual social media site buttons, we have set the width, height and color.
#sticky-social a span – This rule will position the <span> with the name of the social media site off screen until we hover over our button.
#sticky-social a:hover span – Only one property here, but very important, when we hover over our buttons, the <span> with the text of the site will display.
#sticky-social a[class*=”facebook”] etc – The remainder of the code displays the background color for each individual social media site, it sets the color for the button, when hovering and the <span>.
That’s it…easy wasn’t it 🙂
I hope you have enjoyed this tutorial and that it will help you set up your own social media sidebar on your website.
As usual we have set up a demo of this post, so that you can see the code in action and experiment with it. Just click on the button below to be taken to our code playground.
