Rolling Menu With jQuery

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat Rolling Menu With jQuery atau biasa di panggol dengan menu yang bisa berputar pada saat do sorot mouse. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Rolling Menu With jQueryKlik disini untuk melihat demo Rolling Menu With jQuery

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Rolling Menu With jQuery */
.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.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;
}
.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/th_home.png') no-repeat top left;
}
.icon_mail{
    background:transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/th_mail.png') no-repeat top left;
}
.icon_help{
    background:transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/help-1.png') no-repeat top left;
}
.icon_find{
    background:transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/th_find.png') no-repeat top left;
}
.icon_photos{
    background:transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/th_photos.png') no-repeat top left;
}
.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.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;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}
/* End Rolling Menu With jQuery */

5. Kemudian letakkan di atas kode

</b:skin>

6. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas

</head>

7. Selanjutnya tambahkan script di bawah ini

<script src='http://dl.dropbox.com/u/22738692/RollingMenu/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/22738692/RollingMenu/jquery-css-transform.js' type='text/javascript'/>
<script type='text/javascript'>
$('.item').hover(
 function(){
  var $this = $(this);
  expand($this);
 },
 function(){
  var $this = $(this);
  collapse($this);
 }
);
function expand($elem){
 var angle = 0;
 var t = setInterval(function () {
  if(angle == 1440){
   clearInterval(t);
   return;
  }
  angle += 40;
  $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
 },10);
 $elem.stop().animate({width:'268px'}, 1000)
 .find('.item_content').fadeIn(400,function(){
  $(this).find('p').stop(true,true).fadeIn(600);
 });
}
function collapse($elem){
 var angle = 1440;
 var t = setInterval(function () {
  if(angle == 0){
   clearInterval(t);
   return;
  }
  angle -= 40;
  $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
 },10);
 $elem.stop().animate({width:'52px'}, 1000)
 .find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}
</script>

8. Kemudian letakkan di atas

</head>

9. Simpan template
10. Kemudian masuk Elemen Laman, dan pilih Tambah Gadget
11. Setelah itu pilih HTML/Javascript
12. Copy kode ini pada kotak kontent

<div class="menu">
 <div class="item">
  <a class="link icon_mail"></a>
  <div class="item_content">
   <h2>Contact us</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>Help</h2>
   <p>
    <a href="#">FAQ</a>
    <a href="#">Live Support</a>
    <a href="#">Tickets</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_find"></a>
  <div class="item_content">
   <h2>Search</h2>
   <p>
    <input type="text"></input>
    <a href="">Go</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_photos"></a>
  <div class="item_content">
   <h2>Image Gallery</h2>
   <p>
    <a href="#">Categories</a>
    <a href="#">Archives</a>
    <a href="#">Featured</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_home"></a>
  <div class="item_content">
   <h2>Start from here</h2>
   <p>
    <a href="#">Services</a>
    <a href="#">Portfolio</a>
    <a href="#">Pricing</a>
   </p>
  </div>
 </div>
</div>

13. Kemudian simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait