GO Blog

Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini.

Langsung saja kita lanjut untuk mengupas menu ini


Untuk menu ini kita tidak akan membuat daftar, tapi elemen div untuk setiap item menu. Kita akan mengepak item menu dalam div utama yang disebut menu. Setiap item akan memiliki ikon sebagai link elemen dan div isi dengan judul dan paragraf di mana kita akan menambah link atau kotak pencarian:

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

Awalnya, div item yang mengelilingi ikon akan sama besar, kita akan membuatnya berkembang dan kemudian akan membuka isi sesudahnya.


Gaya umum untuk menu seperti font akan didefinisikan sebagai berikut:

.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 dalam menu akan membuka, dan mengatur item untuk memperluas ke kiri dan mendorong item lainnya hilang:

.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;
}

Kemudian kita mendefinisikan gaya ikon (kelas link) dengan cara sebagai berikut:

.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;
}

Elemen konten lainnya sebagai berikut:

.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;
}

Dengan text-shadow putih kita dapat membuat efek teks terukir bagus.
Ok, mari kita tambahkan beberapa sihirnya.


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

$('.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();
}

Javascript di atas memiliki dua fungsi, satu untuk memperluas item dan satu untuk menyembunyikan. Fungsi expand akan membuat ikon memutar 4 kali di sekitar itu sendiri (360 kali 4 adalah 1440). lalu item memperluas dengan menghidupkan peningkatan lebarnya. konten muncul, pertama seluruh div dan kemudian elemen paragraf.

Fungsi menyembunyikan akan memutar ikon kembali, mengurangi lebar item dan membuat konten menghilang.

Dan itu saja! Saya harap Anda menikmatinya dan semoga berguna!