JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h2>Flyout Ribbon using jQuery and CSS3</h2>
<div id="flyout-ribbon" class="ribbon">
    <ul>
        <li><a href="http://facebook.com/beben.koben"><img src="http://facebook.com/favicon.ico" width="30" height="30" alt="Ads" /></a></li>
        <li><a href="http://feeds.feedburner.com/beben-koben"><img src="http://www.blogger.com/favicon.ico" width="30" height="30" alt="Users" /></a></li>
        <li><a href="https://plus.google.com/102652616884015548682"><img src="https://ssl.gstatic.com/s2/oz/images/favicon.ico" width="30" height="30" alt="Images" /></a></li>
        <li><a href="http://[email protected]"><img src="http://www.orkut.com/favicon.ico" width="30" height="30" alt="General Settings" /></a></li>
        <li><a href="http://http://del.icio.us/bebenkoben"><img src="http://del.icio.us/favicon.ico" width="30" height="30" alt="Tools" /></a></li>
        <li><a href="http://"><img src="http://digg.com/favicon.ico" width="30" height="30" alt="Errors" /></a></li>
        <li><a href="http://stumbleupon.com/bebenkoben"><img src="http://stumbleupon.com/favicon.ico" width="30" height="30" alt="Errors" /></a></li>
        <li><a href="http://www.myspace.com/bebenkoben"><img src="http://www.myspace.com/favicon.ico" width="30" height="30" alt="Errors" /></a></li>
        <li><a href="http://reddit.com/bebenkoben"><img src="http://reddit.com/favicon.ico" width="30" height="30" alt="Errors" /></a></li>
    </ul>
</div>

<p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2011/12/flyout-ribbon-using-jquery-and-css3.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://beben-koben.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{padding-top:250px;}
h2{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.ribbon {
position: fixed;
bottom: 50%;
right: 0;
width: 35px;
height: 50px;
overflow: hidden;
}
.ribbon ul,.ribbon .ribbon-toggle {
height: 48px;
background: #debe94;
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:...

JavaScript

(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); 

$(function() {
    $('#flyout-ribbon').FlyoutRibbon();
});