JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<ul id="menugigir">
<li class="rumah">
<a href="http://beben-koben.blogspot.com/" title="home"></a>
</li>
<li class="about">
<a href="https://profiles.google.com/beben.koben" title="Tentang"></a>
</li>
<li class="search">
<a href="http://www.google.com/cse/home?cx=010449103265333969281:_1pbzcoer4w" title="Cari"></a>
</li>
<li class="tools">
<a href="LINKANDA" title="Alat"></a>
</li>
<li class="rssfeed">
    <a href="http://feeds.feedburner.com/beben-koben" title="RSS Feed"></a>
</li>
<li class="komentar">
<a href="LINKANDA" title="Komentar"></a>
</li>
<li class="kontak">
<a href="http://beben-koben.blogspot.com/2009/08/kontak-beben.html" title="Kontak"></a>
</li>
</ul>

CSS

ul#menugigir {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menugigir li {
width: 100px;
}
ul#menugigir li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
filter: alpha(opacity=80); /* MSIE/PC */
-moz-opacity: 0.8; /* Mozilla 1.6 and older */
opacity: 0.8;
}
ul#menugigir .rumah a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menugigir .about a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menugigir .search a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menugigir .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menugigir .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menugigir .tools a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menugigir .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

JavaScript

$(function () {
    $('#menugigir a').stop().animate({
        'marginLeft': '-50px'
    }, 1000);
    $('#menugigir > li').hover(

    function () {
        $('a', $(this)).stop().animate({
            'marginLeft': '-2px'
        }, 500);
    }, function () {
        $('a', $(this)).stop().animate({
            'marginLeft': '-50px'
        }, 300);
    });
});