Hi, in most of the websites we have seen the social icon bar is fixed in some corner of website this will attract and divert the visitors vision to attempt to like and share to others about our website.
Today we are going to see how will do this using jQuery and css.
Today we are going to see how will do this using jQuery and css.

HTML
take one div give it name share, inside this take list of items with social icons and put it in sharebar div, and to navigate the bar from right side to left side take two more dives and give it name #left and #right
<div id="share"> <div id="left">></div> <div id="right"><</div> <div id="sharebar"> <ul id="icons"> <li><img src="you.jpg" width="30" height="30"></li> <li><img src="p.jpg" width="30" height="30"></li> <li><img src="in.jpg" width="30" height="30"></li> <li><img src="ot.jpg" width="30" height="30"></li> <li><a href="https://twitter.com/lessoncup" target="_blank" title="Lessoncup Follow me @ Twitter"> <img src="tw.jpg" width="30" height="30" border="0"></a></li> <li><a href="http://www.facebook.com/lessoncup" target="_blank" title="Lessoncup Follow me @ Google+"> <img src="g+.jpg" width="30" height="30" border="0"></a></li> <li><a href="https://plus.google.com/+lessoncup" target="_blank" title="Lessoncup Follow me @ Facebook"> <img src="fb.jpg" width="30" height="30" border="0"></a></li> </ul> </div> </div>
CSS
put the position: fixed and set the margins from top:0; and right:-300px to #share div, and set the properties to #left and #right dives and put #left div to display:none;
<style> body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#000;} #lessoncup{width:400px; height:auto; border:solid #CCC 0; padding:5px; margin:0 auto; margin-top:200px; font-size:24px; color:#0CF; vertical-align:text-top;} span{ font-size:10px; color:#FC0; margin:0; padding:0;} p{ margin:0; padding:0; line-height:17px;} #share{ position:fixed; right:-295px; width:315px; height:40px; background-color:#CF6; top:0; overflow:hidden; cursor:pointer;} #sharebar{width:295px; height:40px; background-color:#F90; float:right;} #icons{ list-style:none; margin:0; padding:0;} #icons li{ padding:5px; margin-right:2px; float:right;} #right{ font-weight:bold; font-size:12px; margin-top:12px; margin-left:4px; width:5px; height:40px; float:left; cursor:pointer;} #left{ font-weight:bold; font-size:12px; margin-top:12px; margin-left:4px; width:5px;height:40px; float:left;display:none;} </style>
JAVASCRIPT
write the click function to right div and animate the share div form right side to 0 position and mention the speed also using animate() method, it will animate the div from -300px to 0 position because we have already assigned the right position to share div, once it reach to 0 position just hide the right arrow icon and show the left arrow icon,
And write second click function to left div to send the #share div to first position and hide the #left div and show the #right div
And write second click function to left div to send the #share div to first position and hide the #left div and show the #right div
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $('#right').click(function(){ $('#share').animate({right: "0"}, 500); $('#right').hide(); $('#left').show(); }); $('#left').click(function(){ $('#share').animate({right: "-295px"}, 500); $('#left').hide(); $('#right').show(); }); }); </script>
Live Demo Download Script
This comment has been removed by the author.
ReplyDelete