jquery-based side-bar sharing navigation

Today, we share a jquery-based sidebar sharing navigation. This share button has been fixed on the left side, the mouse through the time protruding display, the sharing buttons for the browser: IE8, 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world.

Online preview Source Download

The implemented code.

HTML code:

 <Divclass= "ZZSC">        <ahref= "http://www.w2bc.com/"class= "Lanren1">            <imgsrc= "Images/zzsc01.jpg"alt= "Love Programming"width= " the"Height= " the" /></a> <ahref= "http://www.w2bc.com/"class= "Lanren2">                <imgsrc= "Images/zzsc02.jpg"alt= "Love Programming"width= " the"Height= " the" /></a> <ahref= "http://www.w2bc.com/"class= "Lanren3">                    <imgsrc= "Images/zzsc03.jpg"alt= "Love Programming"width= " the"Height= " the" /></a>        <ahref= "http://www.w2bc.com/"class= "Lanren4">            <imgsrc= "Images/zzsc04.jpg"alt= "Love Programming"width= " the"Height= " the" /></a> <ahref= "http://www.w2bc.com/"class= "Lanren5">                <imgsrc= "Images/zzsc05.jpg"alt= "Love Programming"width= " the"Height= " the" /></a>    </Div>

CSS3 Code:

 *        {margin:0;padding:0;List-style:None; }img{Border:0; }Body{background:#ccc; }. ZZSC{width:50px;Height:250px;position:fixed; Left:0;Top:50%;Margin-top:-125px;Z-index: the; }. ZZSC a{width:50px;Height:50px;Line-height:50px;float: Left;Display:Block;text-align: Right; }. Zzsc. Lanren1{background:#305790; }. Zzsc. Lanren2{background:#2BA9D2; }. Zzsc. Lanren3{background:#CF4C3A; }. Zzsc. Lanren4{background:#4698CA; }. Zzsc. Lanren5{background:#F9694E; }

JS Code:

  $ (function  () {            $ ('. ZZSC a '). Hover (function  () {                $ (this). Animate ({width: ' 65px '}, +);             function () {                $ (this). Animate ({width: ' 50px '}, +);});         

via:http://www.w2bc.com/article/20126

jquery-based side-bar sharing navigation