Di halaman web umum, menu klik kanan default browser IE adalah mode tetap yang tidak berubah, dan sebagian besar netizen tidak terlalu memanfaatkannya saat menjelajahi halaman web. Untuk desainer web profesional, akan sangat keren dan nyaman jika menu klik kanan dapat dirancang dengan konten yang dipersonalisasi.
Bayangkan saja, ketika pengguna mengklik kanan situs web Anda, Anda akan melihat "tautan" dan "kirim pesan" yang diatur dengan cermat, yang bahkan menyertakan animasi Flash interaktif berwarna-warni! Seperti terlihat pada Gambar 1 - jangan ngiler, yuk hilangkan dahaga dan lihat cara membuatnya :).
Saya memiliki dua cara untuk mengubah menu klik kanan (sebenarnya, intinya sama, keduanya adalah JavaScript).
Cara pertama tadi, cukup salin source code berikut ke dalam file HTML yang ada di halaman web.
<gaya>
< !--
.kulit0 {
posisi:mutlak;
perataan teks:kiri;
lebar:200 piksel;
batas:2 piksel hitam pekat;
warna latar belakang:menu;
font-family:Verdana;
tinggi garis:20px;
kursor:standar;
visibilitas: tersembunyi;
}
.kulit1 {
kursor:standar;
font:teks menu;
posisi:mutlak;
perataan teks:kiri;
keluarga font: Arial, Helvetica, sans-serif;
ukuran font: 10pt;
lebar:120 piksel;
warna latar belakang:menu;
perbatasan: 1 tombol padat;
visibilitas: tersembunyi;
batas:2 sorotan tombol awal;
}
.item menu {
padding-kiri:15px;
padding-kanan:10px;
}
-->
</gaya>
<BAHASA SKRIP="JavaScript1.2">
< !-- Situs Web: http://www.painting-effects.co.uk -->
< !-- Skrip ini dan masih banyak lagi tersedia online gratis di -->
< !-- Sumber JavaScript!! http://javascript.internet.com -->
< !-- Mulai
var menuskin = "skin1"; // skin0, atau skin1
var display_url = 0; // Tampilkan URL di bilah status?
fungsi showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (tepi kanan < ie5menu.offsetWidth)
ie5menu.style.left = dokumen.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
kalau tidak
ie5menu.style.left = dokumen.body.scrollLeft + event.clientX;
if (tepi bawah < ie5menu.offsetHeight)
ie5menu.style.top = dokumen.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
kalau tidak
ie5menu.style.top = dokumen.body.scrollTop + event.clientY;
ie5menu.style.visibility = "terlihat";
kembali salah;
}
fungsi sembunyikanmenuie5() {
ie5menu.style.visibility = "tersembunyi";
}
fungsi highlightie5() {
if (event.srcElement.className == "item menu") {
event.srcElement.style.backgroundColor = "sorot";
event.srcElement.style.color = "putih";
jika(display_url)
window.status = acara.srcElement.url;
}
}
fungsi lowlightie5() {
if (event.srcElement.className == "item menu") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "hitam";
jendela.status = "";
}
}
fungsi jumptoie5() {
if (event.srcElement.className == "item menu") {
jika (acara.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
kalau tidak
window.lokasi = acara.srcElement.url;
}
}
// Berakhir -->
</skrip>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Kembali</div>
< div class="menuitems" url=" http://javacool.3322.net ">Kembali ke beranda</div>
<jam>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<jam>
< div class="menuitems" url=" http://www.sina.com.cn ">Sina</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
< /div>
<bahasa skrip="JavaScript1.2">
if (dokumen.semua && jendela.cetak) {
ie5menu.className = kulit menu;
dokumen.oncontextmenu = showmenuie5;
dokumen.body.onclick = hidemenuie5;
}
</skrip>
Efeknya adalah sebagai berikut:
Cara kedua adalah dengan menggunakan plug-in untuk Dreamweaver - Right_Click_Menu_Buil-der, yang dapat diunduh dari http://www.macromedia.com . Setelah instalasi, perintah "Pembuat Menu Klik Kanan" dapat ditemukan di bawah menu "Perintah" di Dreamweaver.
Klik perintah ini, dan kotak pengaturan seperti yang ditunjukkan pada Gambar 3 akan muncul. Pada dasarnya ada dua bagian: "Menu" dan "Gaya".
Menu untuk fungsi pengaturan. Hyperlink dan tautan pengiriman diatur di sini. Hingga 10 koneksi dapat diatur di sini. "Teks Menu" di kotak pilihan ini adalah teks yang akan ditampilkan saat Anda mengklik kanan (ubah ke bahasa Mandarin); tulis jalur tautan yang sesuai di "URL"; "Target" menentukan apakah itu jendela baru atau yang sekarang jendela digunakan untuk tampilan Isi link akan ditampilkan di jendela baru dengan mengisi "Kosong", yang sama dengan pengaturan "Target" Dreamweaver.
Styles bertanggung jawab untuk mengatur tampilan menu. Ada dua opsi:
img src=" "Menu Tipe Windows (Default)" adalah item default - tampilan paling sederhana, gaya Windows yang familier;
“Menu Kustom” Menu kustom, jika Anda memilih item ini, Anda juga perlu mengatur konten berikut:
"Lebar Menu", lebar menu;
"Bentuk", jenis huruf;
"Warna Font", warna font;
"Sisi Font", ukuran font;
"Warna Latar Belakang", "Gambar Latar Belakang", warna latar belakang dan gambar latar belakang;
Ada juga "Cursor", yang digunakan untuk memilih gaya mouse.
Setelah mengatur hal di atas, Anda dapat mengklik “Tambah” untuk menghasilkan efek. Pratinjau apakah bagus?
Lalu bagaimana cara menambahkan Flash? Berikut cara melakukannya: Tambahkan “Tabel” ke halaman web. Disarankan agar lebar “W” diatur ke: “100%”. Ini akan memudahkan penempatan berbagai elemen yang Anda tambahkan di bawah. Oke, masukkan file Flash SWF ke dalam "Tabel" dan atur posisinya menjadi "tengah" (terutama untuk memudahkan penentuan posisi, tentunya Anda dapat menganalisis masalah spesifik secara detail dan Anda akan mendapatkan wawasan dengan mencoba lebih banyak).
Tip: Animasi flash sebaiknya dibuat dengan link interaktif. Dengan cara ini Anda dapat menambahkan hyperlink sebanyak yang Anda inginkan. Pluginnya sendiri memiliki batasan hingga 10 item, yang dapat diselesaikan dengan menggunakan Flash! ^_^