Flyout Ribbon using jQuery and CSS3

Sudah banyak tutorial membuat tombol link share/bookmark Koben bagikan kepada sobat sekalian. Semakin kesini ada saja yang menggelitik kepengen mosting kembali mengenai cara membuat link share button :D Tapi sekarang hasil dari tut's ini akan bisa kita sembunyikan macam hide show Cbox! Apalagi trick menyembunyikan & memunculkan sesuatu sob, banyak banget sudah Beben bagi disini ;)
The original article come from Flyout Ribbon using jQuery and CSS3, created by How-to-ASP.net Disana sudah cukup jelas bagaimana proses pembuatan Flyout Ribbon using jQuery and CSS3, disini Beben Koben si bloglang anu ganteng kalem tea akan berbagi dengan menggunakan resolusi gambar yg lebih kecil :D

demo created by Beben Koben

HTML Markup

<div id="flyout-ribbon" class="ribbon">
<ul>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="Tools" /></a></li>
<li><a href="http://"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
<li><a href="http://YOUR-LINK"><img src="http://YOUR-LINK-IMAGE" width="30" height="30" alt="" /></a></li>
</ul>
</div>

The CSS3

.ribbon {
position: fixed;
top: 0;
right: 0;
width: 35px;
height: 50px;
overflow: hidden;
}
.ribbon ul,.ribbon .ribbon-toggle {
height: 48px;
background: #CCC;
cursor: pointer;
list-style: none;
}
.ribbon .ribbon-toggle {
width: 25px;
position: absolute;
top: 0;
right: 0;
border: 1px solid #000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.ribbon .ribbon-toggle.on {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.ribbon .ribbon-toggle .arrow {
right: 10px;
top: 10px;
display: inline-block;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
border-color: transparent #000 transparent transparent;
border-style: dashed solid dashed dashed;
border-width: 15px;
}
.ribbon ul {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin: 0 25px 0 100%;
padding: 0;
}
.ribbon li {
float: left;
text-align: center;
margin: 5px;
}
.ribbon li a {
text-decoration: none;
display: inline-block;
width: 30px;
height: 30px;
background: #BBB;
border: solid 1px #AAA;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3px;
}
.ribbon li a:hover {
background: #FF9
}

Rubahlah kode CSS yang diberi warna bila kedudukan tidak sesuai!

The jQuery Plugin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="flyout.ribbon.min.js
/*
* File: flyout.ribbon.js
* Version: 1.0
* Author: Ryan Hall (www.how-to-asp.net)
* Info: www.how-to-asp.net/flyout-ribbon-jquery-css3.aspx
*
* Copyright 2010 how-to-asp.net, all rights reserved.
*
* This source file is free software, and is not to be sold or repackaged in any way.
*/
(function($) {
   $.fn.FlyoutRibbon = function(options) {

       var defaults = {
           speed: 500
       };
       var options = $.extend(defaults, options);

       return this.each(function() {
           $ribbon = $(this);
           $ribbon.prepend('<a class="ribbon-toggle"><span class="arrow"></span></a>');
           var toggleWidth = $ribbon.css('width');
           $ribbon.find('a.ribbon-toggle').toggle(function() {
               $(this).addClass('on');
               $ribbon.css('width', '100%');
               $ribbon.find('ul').animate({ marginLeft: '0%' }, options.speed);
           },
           function() {
               $ribbonToggle = $(this);
               $ribbon.find('ul').animate({ marginLeft: '100%' }, options.speed, function() { $ribbonToggle.removeClass('on'); $ribbon.css('width', toggleWidth); });
           });
       });
   };
})(jQuery);
" type="text/javascript"></script>
<script type="text/javascript">
      $(function() {
        $('#flyout-ribbon').FlyoutRibbon();
      });
</script>

Script warna biru, bila sobat sudah punya jangan dipasang lagi. Script warna
ungu hostingkan bila mau. Warna biru muda script pemanggilnya :)
Happy flyout ribbon \m/