<!DOCTYPE html> <html> <head> <base href="https://demos.telerik.com/kendo-ui/fx/slidein#"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css" /> <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script> </head> <body> <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: 100px; left: 0; width: 60px; margin-left: -60px; border: solid #e9e9e9; border-width: 1px 1px 1px 0; } #slide-in-handle { position: absolute; left: 60px; 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: 269px; background: #fff; text-align: center; } #slide-in-share li { 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>