JQuery Image Menu, Membuat Menu Slide Gambar

Desain menu navigasi ini sangat cocok untuk para pemilik situs dengan tema fotografi. Sebenarnya menu ini lebih tepat difungsikan sebagai gambaran umum dari isi sebuah situs dibandingkan dengan penggunaannya sebagai menu biasa:

Lihat Demo

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Ambil scriptnya di sini.

Setelah itu salin kode ini, kemudian letakkan tepat di atas kode </head>:

<script type='text/javascript'>
$(document).ready(function () {
     $('div.jimgMenu ul li a').hover(function() {
          if ($(this).is(':animated')) {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
          } else {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
          }
     }, function () {
          if ($(this).is(':animated')) {
               $(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
          } else {
               $(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
          }
     });
});
</script>

Salin kode pemodel ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

.jimgMenu {
  position:relative;
  width:630px;
  height:200px;
  overflow:hidden;
  margin:10px;
}

.jimgMenu ul {
  list-style:none;
  margin:0px;
  padding:0px;
  display:block;
  height:200px;
  width:1340px;
}

.jimgMenu ul li {
  float:left;
}

.jimgMenu ul li a {
  text-indent:-1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right:2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:78px;
  height:200px;
}

.jimgMenu ul li.satu a  {background:url(http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg) repeat scroll 0%;}
.jimgMenu ul li.dua a   {background:url(http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg) repeat scroll 0%;}
.jimgMenu ul li.tiga a  {background:url(http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg) repeat scroll 0%;}
.jimgMenu ul li.empat a {background: url(http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg) repeat scroll 0%;}
.jimgMenu ul li.lima a  {background: url(http://4.bp.blogspot.com/-m0l4jFx9_TM/ThKqhmjUqmI/AAAAAAAAAXQ/wAPNi03KSn0/s1600/urban.jpg) repeat scroll 0%;min-width:310px;}

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode ini, kemudian letakkan di tempat dimana kamu menginginkan menu ini ditampilkan:

<div class='jimgMenu'>
     <ul>
          <li class='satu'><a href='#'>Landscapes</a></li>
          <li class='dua'><a href='#'>People</a></li>
          <li class='tiga'><a href='#'>Nature</a></li>
          <li class='empat'><a href='#'>Abstract</a></li>
          <li class='lima'><a href='#'>Urban</a></li>
     </ul>
</div>

Pelajari beberapa alternatif peletakan menu navigasi di sini »
Simpan templatemu.


Dari sisi visualisasi, tampilan menu navigasi ini memang menarik, namun jika dilihat dari sisi fleksibilitas, desain menu ini memiliki kekurangan terutama dalam hal pengeditan mengingat menu ini hanya terdiri dari gambar-gambar, bukan tulisan seperti pada umumnya.
Jika kamu menghendaki untuk membuat gambar menu sendiri, ini adalah standar ukurannya:


Gunakan gambar tersebut untuk membuat panduan pemotongan dengan ukuran yang tepat. Setelah gambar barumu tersimpan, upload gambar tersebut, lalu ambil URLnya untuk menggantikan URL-URL ini:

• http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg
• http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg
• http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg
• http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg

Sumber: http://www.alohatechsupport.net