Hiển thị Facebook ẩn hiện bên mép phải

by Unknown Friday, May 13, 2016 0 comments CSS HTML Javascript

<div class="hidden-xs fanpage-fb">

    <a class="btn-fanpage-fb" href="javascript:void(0)"></a>

    <div id="fb-root"></div>

    <script>(function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      if (d.getElementById(id)) return;

      js = d.createElement(s); js.id = id;

      js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6&appId=1418906215084656";

      fjs.parentNode.insertBefore(js, fjs);

    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>

</div>

<style>

    .fanpage-fb {

        position: fixed;

        top: 200px;

        width: 340px;

        right: -340px;

        z-index: 999;

    }

    .fanpage-fb .btn-fanpage-fb {

        width: 48px;

        height: 155px;

        background: url(/images/icon/fb-right.png) no-repeat transparent;

        display: block;

        position: absolute;

        right: 340px;

    }

    @media (max-width: 767px) {

        .fanpage-fb {

            display: none;

        }

    }

</style>

<script>

    $(document).ready(function() {

        $(".fanpage-fb").on('mouseenter', function() {

            $(".fanpage-fb").stop().animate({right:'0px'}, 500);

        });

        $(".fanpage-fb").on('mouseleave', function() {

            $(".fanpage-fb").stop().animate({right:'-340px'}, 500);

        });

    });

</script>