jube-fork/Jube.App/wwwroot/kendo/examples/fx/slidein.html

<!DOCTYPE html>
<html>
<head>
    <title>Slide In</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div id="slide-in-content">
        <div id="slide-in-share">
            <a id="slide-in-handle" href="#">Share</a>
            <ul>
                <li><a class="share-button share-facebook" href="#">Share in Facebook</a></li>
                <li><a class="share-button share-twitter" href="#">Post in Twitter</a></li>
                <li><a class="share-button share-tumblr" href="#">Reblog in Tumblr</a></li>
            </ul>
        </div>
    </div>
</div>

<style>
    #slide-in-content {
        width: 600px;
        height: 558px;
        background: transparent url(../content/web/fx/blogs-screenshot.png) no-repeat 50% 50%;
        border: 1px solid #ededed;
        -o-box-shadow: 0 0 5px rgba(0,0,0,.15);
        -moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
        box-shadow: 0 0 5px rgba(0,0,0,.15);
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    #slide-in-share {
        position: absolute;
        top: 200px;
        left: 0;
        width: 200px;
        margin-left: -200px;
        border: solid #e9e9e9;
        border-width: 1px 1px 1px 0;
    }

    #slide-in-handle {
        position: absolute;
        left: 200px;
        width: 31px;
        height: 69px;
        background: #1b7458 url(../content/web/fx/share-handle.png) no-repeat 50% 50%;
        color: #fff;
        text-indent: -999em;
    }

    #slide-in-share ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 69px;
        background: #fff;
        text-align: center;
    }

    #slide-in-share li {
        display: inline-block;
        margin: 0 2px;
    }

    .share-button {
        background: #fff url(../content/web/fx/social-buttons.png) no-repeat 50% 50%;
        border: 4px solid #a6a6a6;
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-top: 17px;

        -webkit-border-radius: 21px;
        -moz-border-radius: 21px;
        border-radius: 21px;
        text-indent: -999em;
        color: #a6a6a6;
    }

    .share-button:hover {
        border-color: #333;
    }

    .share-facebook { background-position: 50% -2px; }
    .share-twitter { background-position: 50% -40px; }
    .share-tumblr { background-position: 50% -78px; }

    .share-facebook:hover { border-color: #3b5998; }
    .share-twitter:hover { border-color: #00c0f7; }
    .share-tumblr:hover { border-color: #2b4865; }
</style>

<script>
    var slide = kendo.fx($("#slide-in-share")).slideIn("left"),
        visible = true;

    $("#slide-in-handle").click(function(e) {
        if (visible) {
            slide.reverse();
        } else {
            slide.play();
        }
        visible = !visible;
        e.preventDefault();
    });

</script>


    
</body>
</html>