JQuery Image Menu, Membuat Menu Slide Gambar

Tabel Konten
  1. Langkah Pertama: Pemanggilan JQuery dan Paket Easing 
JQuery Image Menu

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:

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 »
Simpantemplatemu.

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:

JQuery
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

6 Komentar

  • Unknown

    kalo gak salah ini, seperti elastiz box ya kang

  • Taufik Nurrohman

    @Zh!nTho: Ya.. mungkin... begitulah! :p

  • pgmistain

    maaf mau tanya, caranya udah ana coba, berhasil... :-bd nah karena saya memasang di bawah header, dengan slide menu di atas yang jumlahnya 5, jadi terlihat kosong di setengah sisi sebelah kanan, trus saya coba tambah menu slide nya, tapi kok menu tambahannya malah tertutup ya? :( Mohon bantuannya ya sobat... :)

    • Taufik Nurrohman

      Perbesar lebarnya di sini:

      .jimgMenu {
      /* ... */
      width:630px;
      }
      .jimgMenu ul {
      /* ... */
      width:1340px;
      }
  • pgmistain

    owh iya sobat, kalu menunya di buat vertikal bagaimana caranya...? mohon bisa berbagi tutorialnya.. terimakasih... =p*

  • pgmistain

    ok sobat.., sudah berhasil, tinggal butuh beberapat editan saja...
    terimakasih ya...
    owh ya, di wesite sobat ada postingan tentang cara membuat menu seperti sosial media yang ketika di sentuh kursos dia berputar atau bergerak seberti tutorial yang sekarang? tadi malam sudah saya buka2 post web sobat... atau mungkin saya yang ndak tau namanya... mohon bantuannya... terimakasih....

Komentar telah ditutup.