Sliding Social Tab

You just managed to implement your first website and you are ready to spice it up a little bit with some interesting social links, but you don`t know what to do? Fear no more, as this tutorial will teach you how to do this.

Let`s start by doing the mark-up. As you can see, we will be using a wrapper div that will contain the actual list of links and the pull-tap. Please not that I am using Font Awesome API for the icons, as it`s much easier to resize and make thing look neat.

<div id="social-wrap">
    <ul id="social">
        <li>
            <a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
        </li>
        <li>
            <a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>
        </li>
        <li>
            <a href="#" title="Instagram" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
        </li>
        <li>
            <a href="#" title="RSS" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
        </li>
    </ul>
    <div id="pull">
        Social
    </div>
</div

The styling will be quite simple, just some positioning lines and some animation using the CSS3 built-in transition attribute. I went with a dark-gray and red color scheme, but you can change it however you want. We will also use CSS3`s transform attribute, to rotate the pull-tap 90 degrees so it will be vertical.

#social{background:#3c3c3c;padding:10px;display:block;width:50px;float:left}
#social-wrap{position:fixed;top:50%;margin-top:-124px;left:-72px;z-index:300;transition:all .3s linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear;font-family:Arial;line-height:200%}
#social a{color:#fff;padding:10px;display:block;width:30px;transition:all .3s linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear}
#social a:hover{color:#ff5151;transition:all .3s linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear}
#social li{width:50px}
#pull{cursor:pointer;width:20px;float:left;color:#fff;margin-left:-14px;margin-top:100px;background:#3c3c3c;display:block;-webkit-transform:rotate(+90deg);transition:all 0 linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transform:rotate(+90deg);-ms-transform:rotate(+90deg);-o-transform:rotate(+90deg);filter:progid: DXImageTransform.Microsoft.BasicImage(rotation=1);width:40px;padding:0 10px}
#pull:hover{background:#ff5151}

The actual functionality of showing and hiding the links will be implemented using jQuery as it has some built-in functions that help a bit at simplifying the code. Please note that you have to include the jQuery library in your project to make things work. The basic idea is that it checks for a class named “opened”, and if it is present then the list retracts, else the list gets shown.

$("#pull").click(function() {
    if ($('.opened')[0]) {
        $('#social-wrap').css("left", "-72px");
        $('#social-wrap').removeClass("opened");
    } 
    else {
        $('#social-wrap').css("left", "0");
        $('#social-wrap').addClass("opened");
    }
});

I hope this tutorial will help you in your Web-Design journey, and if you would like more tutorials, use the comment section down below to suggest ideas for future tutorials.

BMC

My name is BMC and I am a superhero. Well, maybe not a superhero, but what is certain is that I am an aspiring writer with high hopes and big dreams. I started writing in the summer of 2013 on this website and let me say, it is a fantastic ride!

You may also like...

1 Response

  1. oakley sunglasses cheap says:

    Thanks a lot for sharing!

Leave a Reply