sliding social network menu

Follow us on Facebook Follow us on Twitter Follow us on Google+ Follow us on Pinterest Subscribe with RSS

Everybody likes to put the social network icons in his /her website or blog in a single place so that it is easy for the visitors to share their views. Here we want to put the source code so that the social icons are simple and better. You may put the url link of the social media in place of xxxxxx. You may add n-number of social media icons to suit your requirement. The css code and html code are given below:

CSS CODE:

<style type="text/css"> #bssose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #bssose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #bssose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #bssose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://2.bp.blogspot.com/-05soRH2FN0M/URs3FjSpiBI/AAAAAAAABYc/UjN-swK_7yc/s320/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #bssose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #bssose .icon{overflow:hidden; color:#fafafa;} #bssose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #bssose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #bssose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #bssose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #bssose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #bssose li:hover .icon, .touch #bssose li .icon{width:210px;} .touch #bssose li .facebook, #bssose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #bssose li .twitter, #bssose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #bssose li .googleplus, #bssose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #bssose li .pinterest, #bssose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #bssose li .rss, #bssose li:hover .rss{background-color:rgba(255,102,0,1);} </style>

HTML CODE:

<ul id="bssose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/xxxxxx ">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/xxxxxx ">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/xxxxxx ">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/xxxxxx ">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/xxxxxx ">Subscribe with RSS</a></li> </ul>