Pujangga Blogs

jQuery
Patch jQuery yang akan kita pakai kali ini :
<script language='javascript' src='jquery.min.js' type='text/javascript'/>
<script language='javascript' src='jquery-css-transform.js' type='text/javascript'/>
<script language='javascript' src='jquery-animate-css-rotate-scale.js' type='text/javascript'/>

Letakan patch jQuery tersebut diatas dari tag </body> page html anda.

Javascript diatas bisa anda dapatkan diakhir bagian dari artikel ini.Silahkan anda download terlebih dahulu dan upload ke hosting favorite anda.

Kode HTML
Untuk menu ini kita tidak akan membuat daftar, tapi elemen div untuk setiap item menu. Kita akan mengemas item menu pada tag <a> didalam tag <div> yang kita jadikan sebagai dasar menu. Setiap item akan memiliki ikon sebagai elemen link dan div konten dengan elemen header di mana kita juga akan menambahkan link atau kotak pencarian.
Untuk Bloggspot,anda bisa meletakan kode html ini pada page html diatas atau dibawah Header atau bisa juga dengan menambahkan element add a gadget » html and javascript :

<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>

Kode CSS
Sekarang mari kita lihat pada rangkaian kode css yang akan kita dipakai sebagai style latihan kita kali ini.Untuk sahabat blogger bisa meletakan kode css ini dibagian atas tag </b:skin>

.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(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/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;
}

JavaScript
Pertama, kita perlu menambahkan skrip inklusi dari jQuery dan dua lainnya script dari Zachary.
Kemudian kita akan menambahkan fungsi-fungsi berikut:

<script type='text/javascript'>
//<![CDATA[
$('.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>

Letakan scipt tersebut di bagian atas dari tag </body> .
Untuk mempermudah, kita membuat dua fungsi pada script diatas, satu untuk memperluas ( expand ) item dan satu lagi untuk menyusutkan ( collapse ) item menu. Fungsi expand akan membuat ikon memutar 4 kali sekitarnya (360 kali 4 adalah 1440). Kita juga akan membuat item tersebut dengan menganimasikan peningkatan lebarnya. Kemudian, kita membiarkan konten muncul, pertama pada keseluruhan tag div dan disusul dengan menu link dari masing-masing item. Fungsi pada collapse akan memberikan efek perputaran icon item memutar kembali , mengurangi lebar item dan membuat konten menghilang.
Saya yakin anda pasti bisa mengikutinya dan berhasil....

Salam....

Untuk melengkapi tutorial ini...anda bisa download file latihan kita ini yang nantinya bisa anda letakan pada filehosting anda sendiri dan contoh dari index.html sebagai project latihan.
Download spin and widen the navigation menu