Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Membuat Menu Navigasi Rocking Rolling Rounded – Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya kepincut. Pada versi awal dari menu Rocking Rolling ini hanya menggunakan efek sliding seperti yang dapat sobat lihat di http://tympanus.net/Tutorials/RockingRollingMenu/. Namun dalam versi yang saya share kali ini terdapat penambahan  efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!





VIEW DEMO HERE


Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.
<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.
#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, paragraf dan formulir */
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://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.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;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.
<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</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({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,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').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>


5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

 Selamat bereksprimen coba Membuat Rocking Rolling Rounded Menu dengan JQuery ini, kalo belum berhasil coba terus aja yaaacchh…!! Salam Blogger and happy nice blogging !

Referensi tulisan :
http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/
http://tip-triksblogger.blogspot.com/2011/03/rocking-rolling-rounded-menu-with.html
http://blogcunayz.blogspot.com/2011/12/menu-rocking-rolling-rounded-dengan.html


25 komentar untuk "Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3"

  1. mas irfan
    pertamak @mahir blogging
    di tunggu2 artikel dari mas,,

    BalasHapus
  2. keduaaxxx..
    heheh :))
    makasih infonya gan..

    ditunggu artikel barunya :D

    BalasHapus
  3. Waah Bisa Bagus Nih Website Saya.
    Makasih yah udah share ilmunya.
    animasi nya bagus

    BalasHapus
  4. maksimalkan blog kita dengan maksimal demi tamu kita

    BalasHapus
  5. artikel di blog mas ajib2..., mantap...., mudah di cerna untuk seorang newbie seperti saya. tapi untuk artikel cara membuat rocking rolling rounded menu ini saya gagal mas..., udah saya coba berulang kali hasilnya tetap saja gagal..., mohon bimbingannya mas...., untuk artikel yang lainnya saya berhasil mas, lihat aja disini: http://ibnoe-s.blogspot.com, dan terima kasih atas infonya mas......

    BalasHapus
  6. wah mantep...pingin nyoba ah...ijin bookmark gan.

    BalasHapus
  7. Infonya bagus kawan irfan.. Btw.. Mau gak Tukaran banner.. Banner kawan sudah saya pasang kok

    BalasHapus
  8. i like post!!!
    thanks infonya!!
    :)

    BalasHapus
  9. mantap gan......

    bagi teman2 yang membaca, tolong jg kunjungi blog saya ya di

    WWW.SEMUA2ADA.BLOGSPOT.COM

    BalasHapus
  10. mantap........http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif

    BalasHapus
  11. mantap om irfan tipsnya ane pernah make yang ini tp dicopot lagi :D

    BalasHapus
  12. Dapat pertama,makasih info jquerynya..mau bertukar link di homepage? adil kan?

    BalasHapus
  13. @Infonet
    Sama2 sob.., oke sudah saya link balik tuh..! ;)

    BalasHapus
  14. wah... mantap nih sob... tapi kebanyakan penghias kaya gitu bikin blog berat gak sih..?

    BalasHapus
  15. makasih infonya mas..., alhamdulillah akhirnya saya berhasil membuat witged navigasi dengan jqwery ini
    http://ibnoe-s.blogspot.com/

    BalasHapus
  16. request boleh mas....????,posting juga dong cara mengganti gambar widget Membuat Rocking Rolling Rounded Menu dengan JQuery

    BalasHapus
  17. di konten saya tidak ada kode header wrapper, yang ada cuma header innear, bagai mana itu mengatasinya ?

    terimakasih

    BalasHapus
  18. saya berhasil membuatnya gan , memang jadi tambah cantik blognya, makasih ,

    BalasHapus
  19. makasih gan, sangat-sangat bekerja di blog saya..,
    cek di TKP gan.,.,

    BalasHapus
  20. keren menu navigasinya bisa berputar putar

    BalasHapus