jQuery Rolling menu animation effect

dah lama nulis di blog
sibuk kerjaan soalnya. :v

hmmh.. kmaren iseng2 blajar bikin web portal sendiri.
hasil googling nyari2 tiap elemen2 portalnya. salah satunya yaitu menu.
kmaren ktemu ama yg namanya rolling menu effect. pake jquery.
stelah utak atik sdikit. akhirnya jadi juga.
hasilnya bisa dilihat disini http://fake.hol.es


nah, gimana cara bikinnya?
langsung aja step by stepnya yak:

STEP 1
kita ambil dulu library jquery nya, ane ngambil dari http://ajax.googleapis.com , nah biar gampang. ambil aja ini. yg udah ane save di site ane.
taro script ini diatas tag





STEP 2
klo udah, skrang kita tambahin CSS nya

#rocking-rolling
    {
        width:auto;
           height:52px;
        text-align:left;
        font-family:"Trebuchet MS",sans-serif;
        font-size:16px;
        font-style:normal;
        font-weight:bold;
        text-transform:uppercase;
    }

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form /* netralisasi tampilan elemen heading */
    {
        margin:0 0 0 0;
        pading:0 0 0 0;
        border:none;
        background:transparent;
    }

#rocking-rolling .item
    {
        position:relative;
        background-color:#f0f0f0;
        float:right;
        width:52px;
        margin:0px 5px; height:52px;
        border:2px solid #ddd;
        -moz-border-radius:30px;
        -webkit-border-radius:30px;
        border-radius:30px;
        -moz-box-shadow:1px 1px 3px #555;
        -webkit-box-shadow:1px 1px 3px #555;
        box-shadow:1px 1px 3px #555;
        cursor:pointer;
        overflow:hidden;
    }

#rocking-rolling .link
    {
        left:2px; top:2px;
           position:absolute;
           width:48px;
        height:48px;
    }

#rocking-rolling .icon_home
    {
        background:transparent url(http://fake.hol.es/images/home.png) no-repeat top left;
    }

#rocking-rolling .icon_chat
    {
        background:transparent url(http://fake.hol.es/images/chat.png) no-repeat top left;
    }

#rocking-rolling .icon_archives
    {
        background:transparent url(http://fake.hol.es/images/archives.png) no-repeat top left;
    }

#rocking-rolling .icon_tools
    {
        background:transparent url(http://fake.hol.es/images/tools.png) no-repeat top left;
    }

#rocking-rolling .icon_profil
    {
        background:transparent url(http://fake.hol.es/images/profil.png) no-repeat top left;
    }

#rocking-rolling .item_content
    {
        position:absolute;
        height:52px;
        width:220px;
        overflow:hidden;
        left:56px;
        top:7px; background:transparent; display:none;
    }

#rocking-rolling .item_content h2
    {
        color:#aaa;
        text-shadow:1px 1px 1px #fff;
        background-color:transparent;
        font-size:14px;
    }

#rocking-rolling .item_content a
    {
        background-color:transparent;
        float:left;
        margin-right:7px;
           margin-top:3px;
        color:#bbb;
        text-shadow:1px 1px 1px #fff;
        text-decoration:none;
        font-size:12px;
    }

#rocking-rolling .item_content a:hover
    {
        color:#0b965b;
    }

#rocking-rolling .item_content p
    {
        background-color:transparent;
        text-transform:none;
        font-weight:normal !important;
        display:none;
    }

#rocking-rolling .item_content p input
    {
        border:1px solid #ccc;
        padding:1px;
           width:155px; float:left;
           margin-right:5px;
        box-shadow:none;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
    }

di bagian ini

#rocking-rolling .icon_home
{
background:transparent url(http://fake.hol.es/images/home.png) no-repeat top left;
}

#rocking-rolling .icon_chat
{
background:transparent url(http://fake.hol.es/images/chat.png) no-repeat top left;
}

#rocking-rolling .icon_archives
{
background:transparent url(http://fake.hol.es/images/archives.png) no-repeat top left;
}

#rocking-rolling .icon_tools
{
background:transparent url(http://fake.hol.es/images/tools.png) no-repeat top left;
}

#rocking-rolling .icon_profil
{
background:transparent url(http://fake.hol.es/images/profil.png) no-repeat top left;
}

yang warna merah, itu link gambar icon menunya. bisa aja diganti sesuai gambar yg senada sama warna webnya.


STEP 3
sekarang kita masukin div nya. ato yang munculin nih menu.
taro script ini ditempat dimana kita mau nempatin menunya. bisa di bawah head. ato dimana aja.


<!-----------------------------MENU START-------------------------------->
     <div id='rocking-rolling'>
    <div class='item'>
    <a class='link icon_chat'></a>
    <div class='item_content'>
    <h2>REACH ME via</h2>
    <p>
    <a href='#'>Email</a>
    <a href='#'>Facebook</a>
    <a href='#'>Twitter</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_archives'></a>
    <div class='item_content'>
    <h2>ARCHIVES</h2>
    <a href='#'>Shell</a>
    <a href="#">Bot</a>
    <a href="#">Local Root</a>
    <a href="#">Tools</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_tools'></a>
    <div class='item_content'>
    <h2>TOOLS</h2>
    <p>
    <a href='#'>MD5</a>
    <a href='#'>BASE64</a>
    <a href='#'>SHA1</a>
    <a href='#'>IP</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_profil'></a>
    <div class='item_content'>
    <h2>ABOUT</h2>
    <p>
    <a href='#'>Me</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_home'></a>
    <div class='item_content'>
    <h2>HOME</h2>
    <p>
    <a href='#'>Portal</a>
    <a href='#'>Blog</a>
    <a href='#'>Forum</a>
    </p>
    </div>
    </div>

    <div style='clear:both;'></div>
    </div>

    <script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({wid​th:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(t​rue,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).​stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fade​In(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hov​er(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>
<!---------------------------MENU END------------------------------------>

    
untuk menunya silakan disesuaiin sendiri.
di bagian:

<h2>REACH ME via</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Facebook</a>
<a href='#'>Twitter</a>
</p>

yups.. selesai.
save.

coba di test.

DEMO | DOWNLOAD


klo masi bingung, silakan ditanyakan.
sekian dr ane.

• Tweet
• Share
• Share
• Share
• Share

Subscribe with your email:

Delivered by FeedBurner