Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

JQuery Image Menu, Membuat Menu Slide Gambar

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

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


  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 6 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!