Tutorial ini akan menjelaskan langkah demi langkah cara menggunakan JQuery dan CSS untuk membuat menu dinamis yang keren. Fitur "tulis lebih sedikit, lakukan lebih banyak" dari jQuery sudah diketahui semua orang. Bahkan orang yang tidak memiliki pengalaman pemrograman JS yang luas dapat dengan cepat mempelajari cara menggunakannya melalui API yang disediakannya Anda dapat Memahami prinsip implementasi setiap fungsi utama jQuery. Mari kita lihat saja cara menggunakannya untuk mencapai efek ajaib dari menu.
.jpg)
Anda dapat mengklik untuk melihat demo atau mendownload kode sumber .
Langkah 1 - Struktur HTML
Perhatikan kode HTML menunya, tidak ada bedanya dengan kode menu biasa:
<div id="menu" kelas="menu">
<ul>
<li><a href="javascript:;">Beranda</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Sumber Daya</a></li>
<li><a href="javascript:;">Tutorial</a></li>
<li><a href="javascript:;">Tentang</a></li>
</ul>
</div>
Kuncinya adalah menggunakan skrip untuk membuat beberapa lapisan terpisah di setiap titik jangkar (sebuah elemen), sehingga lapisan tersebut dapat dikontrol untuk dianimasikan secara terpisah saat mouse diarahkan. Untuk melakukan ini, kita perlu memodifikasi struktur DOM ketika DOM dimuat sehingga setiap kode jangkar menjadi seperti berikut:
<a href="javascript:;">
<span class="out">Rumah</span>
<span kelas="bg"></span>
<span class="over">Beranda</span>
</a>
Konten di setiap titik jangkar asli akan ditambahkan ke dua elemen span (.out dan .over), dan elemen span lainnya (.bg) adalah lapisan gambar latar belakang.
Adapun cara memodifikasi struktur DOM kode JS akan dijelaskan pada Langkah 3.
Langkah 2 - gaya CSS
Dalam contoh tersebut, ditampilkan dua gaya, satu dengan gambar latar dan satu lagi tanpa gambar latar (lihat demo untuk detailnya). Anda juga dapat dengan bebas menyesuaikan gaya Anda sendiri untuk mendesain menu yang lebih keren :
/* Berikut ini adalah gaya dasar menu
*/.menuulli{
mengapung: kiri;
/* Isi sub-elemen menu tidak dapat dilihat */
meluap: tersembunyi;
/* Beberapa kode dihilangkan di bawah*/
}
.menu ul li a {
/* Harus dalam posisi relatif */
posisi: relatif;
tampilan: blok;
lebar: 110 piksel;
/* Beberapa kode dihilangkan di bawah*/
}
.menu ul li a span {
/* Semua lapisan akan menggunakan posisi absolut */
posisi: mutlak;
kiri: 0;
lebar: 110 piksel;
}
.menu ul li a span.out {
atas: 0 piksel;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* Awalnya, layer .over dan layer .bg berukuran -45px relatif terhadap elemen a untuk mencapai efek tersembunyi*/
atas: -45 piksel;}/
*Berikut adalah contoh penggunaan gambar latar belakang*/
#menu {
/*Latar belakang menu*/
latar belakang:url(bg_menu.gif) gulir 0 -1px ulangi-x;
batas:1 piksel padat #CCC;}
#menu ul li a {
warna: #000;
}
#menu ul li a span.over {
warna: #FFF;
}
#menu ul li span.bg {
/* Tentukan tinggi dan gambar latar belakang*/
tinggi: 45 piksel;
latar belakang: url(bg_over.gif) pusat tengah tanpa pengulangan;
}
Anda juga dapat menyesuaikan sendiri gaya CSS, dan versi gaya yang disederhanakan juga disediakan di sini ( lihat demo )