Gdzieś w sekcji body - poza pozostałym kodem strony.
<ul id="musli" class="musli"> <li> <img src="c-icons/fb.png" /> <div class="musli-facebook">KOD ZAKŁADKI</div> </li> <li> <img src="c-icons/gp.png" /> <div class="musli-google">KOD ZAKŁADKI</div> </li> </ul> <ul id="musli2" class="musli musli-bottom"> <li> <img src="c-icons/fb.png" /> <div class="musli-facebook">KOD ZAKŁADKI</div> </li> <li> <img src="c-icons/gp.png" /> <div class="musli-google">KOD ZAKŁADKI</div> </li> </ul> <ul id="musli3" class="musli musli-top"> <li> <img src="c-icons/fb.png" /> <div class="musli-facebook">KOD ZAKŁADKI</div> </li> <li> <img src="c-icons/gp.png" /> <div class="musli-google">KOD ZAKŁADKI</div> </li> </ul> <ul id="musli4" class="musli musli-left"> <li> <img src="c-icons/fb.png" /> <div class="musli-facebook">KOD ZAKŁADKI</div> </li> <li> <img src="c-icons/gp.png" /> <div class="musli-google">KOD ZAKŁADKI</div> </li> </ul>
/* reset */ .musli *{ padding:0; margin:0; list-style:none; } .musli{ position:fixed; right:0px; top:150px; z-index:100; list-style:none; } .musli-bottom{ left:300px; bottom:0px; right:auto; top:auto; } .musli-top{ left:300px; top:0px; right:auto; bottom:auto; } .musli-left{ left:0px; top:200px; right:auto; bottom:auto; } .musli > li{ cursor:pointer; width:35px; height:35px; margin-bottom:1px; position:relative; } .musli-bottom > li, .musli-top > li{ margin-right: 1px; margin-bottom: 0; float:left; } .musli > li > img{ -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .musli-bottom > li > img{ -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .musli-top > li > img{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .musli-left > li > img{ -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .musli > li > div{ padding:5px; background: #fff; float:left; width:286px; height:296px; -moz-border-radius: 0 0 0 8px; -webkit-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; position:absolute; top:0; left:35px; z-index:100; } .musli-bottom > li > div{ top:35px; left:auto; -moz-border-radius: 0 8px 0 0; -webkit-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0; } .musli-top > li > div{ bottom:35px; left:auto; top:auto; -moz-border-radius: 0 0 8px 0; -webkit-border-radius: 0 0 8px 0; border-radius: 0 0 8px 0; } .musli-left > li > div{ top:0px; left:auto; right:35px; -moz-border-radius: 0 0 8px 0; -webkit-border-radius: 0 0 8px 0; border-radius: 0 0 8px 0; } .musli-google{ border: solid #cd3c2a 3px; } .musli-facebook{ border: solid #0170cf 3px; } .musli-twitter{ border: solid #07afee 3px; } .musli-nk{ border: solid #8fc44c 3px; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script> $(function(){ $('#musli').musli({animationAction: "click"}); $('#musli2').musli( { musliPosition: "bottom", animationAction: "click" } ); $('#musli3').musli( { musliPosition: "top", animationAction: "click" } ); $('#musli4').musli( { musliPosition: "left", animationAction: "click" } ); }); </script>
Wróć do artykułu na WPadmin.pl omawiającego tematykę Multi Social Slider Facebook →