Artikel ini menjelaskan metode menerapkan menu klik kanan halaman web yang sepenuhnya disesuaikan dengan direktori multi-level di JS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Ini adalah fitur mouse web yang sangat bagus. Kode ini dapat mengontrol menu klik kanan mouse di halaman web, dan dibuat sepenuhnya sesuai dengan keinginan Anda. Ini dapat ditampilkan dalam berbagai tingkatan katalog.
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> js halaman web kustom menu navigasi multi-level </iteme>
<type style = "text/css">
html, tubuh {tinggi: 100%; overflow: tersembunyi;}
Tubuh, Div, Ul, Li {Margin: 0; Padding: 0;}
Tubuh {font: 12px/1.5/5fae/8f6f/96c5/9ed1;}
UL {List-style-type: none;}
#rightmenu {position: absolute; top: -9999px; kiri: -9999px;}
#rightmenu ul {float: left; border: 1px solid #979797; latar belakang: #f1f1f1 url (gambar/line.png) 24px 0 ulangi-y; padding: 2px; kotak-shadow: 2px 2px 2px rgba (0,0,0, .6);};
#RightMenu ul li {float: left; clear: keduanya; tinggi: 24px; kursor: pointer; garis-line-height: 24px; spasi putih: nowrap; padding: 0 30px;}
#RightMenu ul li.sub {latar belakang-repeat: no-repeat; latar belakang posisi: kanan 9px; latar belakang-gambar: url (gambar/panah.png);}
#RightMenu ul li.active {latar belakang-warna: #f1f3f6; border-radius: 3px; Border: 1px solid #aecff7; tinggi: 22px; garis-tinggi: 22px; latar belakang posisi: kanan -8px; padding: 0 29px;}
#RightMenu ul {display: none; position: absolute;}
</tyle>
<type skrip = "Teks/JavaScript">
var getoffset = {
Top: function (obj) {
kembalikan obj.offsettop + (obj.offsetparent? argumen.callee (obj.offsetparent): 0)
},
Kiri: function (obj) {
kembalikan obj.offsetleft + (obj.offsetparent? argumen.callee (obj.offsetparent): 0)
}
};
window.onload = function ()
{
var omenu = document.getElementById ("rightMenu");
var aul = omenu.getElementsbyTagname ("ul");
var ali = omenu.getElementsbyTagname ("li");
var showtimer = hidetimer = null;
var i = 0;
var maxwidth = maxheight = 0;
var adoc = [document.documentelement.offsetWidth, document.documentelement.offsetheight];
omenu.style.display = "none";
untuk (i = 0; i <ali.length; i ++)
{
// Tambahkan panah ke LI yang berisi submenu
Ali [i] .getElementsByTagname ("ul") [0] && (Ali [i] .className = "sub");
// Pindah
Ali [i] .onmouseover = function ()
{
var othis = ini;
var oul = othis.getElementsbyTagname ("UL");
// Pindahkan mouse ke gaya
othis.classname += "aktif";
// Tampilkan submenu
if (oul [0])
{
ClearTimeout (Hidetimer);
showtimer = setTimeout (function ()
{
untuk (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .geteLementsByTagname ("ul") [0] &&
(othis.parentnode.children [i] .getElementsbyTagname ("ul") [0] .style.display = "none");
}
oul [0] .style.display = "block";
oul [0] .style.top = othis.offsettop + "px";
oul [0] .style.left = othis.offsetwidth + "px";
setWidth (oul [0]);
// Rentang tampilan maksimum
maxWidth = ADOC [0] - oul [0] .offsetWidth;
maxheight = adoc [1] - oul [0] .offsetHeight;
// Cegah overflow
maxwidth <getoffset.left (oul [0]) && (oul [0] .style.left = -oul [0] .clientWidth + "px");
maxheight <getoffset.top (oul [0]) && (oul [0] .style.top = -oul [0] .clientHeight + othis.offsettop + othis.clientheight + "px")
}, 300);
}
};
// mouse keluar
Ali [i] .onmouseout = function ()
{
var othis = ini;
var oul = othis.getElementsbyTagname ("UL");
// Gaya Mouse Out
othis.classname = othis.classname.replace (// s? Active/, "");
ClearTimeout (showtimer);
hidetimer = setTimeout (function ()
{
untuk (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .geteLementsByTagname ("ul") [0] &&
(othis.parentnode.children [i] .getElementsbyTagname ("ul") [0] .style.display = "none");
}
}, 300);
};
}
// Sesuaikan menu klik kanan
document.oncontextMenu = function (event)
{
var event = event || window.event;
omenu.style.display = "block";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
setWidth (aul [0]);
// Rentang tampilan maksimum
MaxWidth = ADOC [0] - Omenu.OffsetWidth;
MaxHeight = ADOC [1] - Omenu.OffsetHeight;
// Cegah overflow menu
omenu.offsettop> maxheight && (omenu.style.top = maxheight + "px");
omenu.offsetleft> maxwidth && (omenu.style.left = maxwidth + "px");
mengembalikan false;
};
// Klik untuk menyembunyikan menu
document.onClick = function ()
{
omenu.style.display = "none"
};
// Mohon lebar terbesar di LI dan tetapkan ke semua LIS di level yang sama
Function SetWidth (OBJ)
{
MaxWidth = 0;
untuk (i = 0; i <obj.children.length; i ++)
{
var oli = obj.children [i];
var iwidth = Oli.ClientWidth - ParseInt (Oli.Currentstyle? Oli.Currentstyle ["Paddingleft"]: GetComputedStyle (Oli, NULL) ["Paddingleft"]) * 2
if (iwidth> maxwidth) maxwidth = iwidth;
}
untuk (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxwidth+"px";
}
};
</script>
</head>
<body>
<Tenter> Menu klik kanan khusus, silakan klik kanan pada halaman untuk melihat efeknya. </penter>
<Div id = "rightmenu">
<ul>
<li> <strong> JavaScript Learning </strong> </li>
<li>
Wulin.com
<ul>
<li> Analisis Halaman Web Prinsip Efek Khusus </li>
<li> Menanggapi tindakan pengguna </li>
<li> Efek kotak cepat </li>
<li> Event-Driven </li>
<li> Operasi atribut elemen </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Ubah warna latar belakang halaman web </li>
<li> Transfer parameter fungsi </li>
<li> Penulisan fungsi reusability tinggi </li>
<li> 126 Efek Pilihan Kotak Surat </li>
<li> Operasi Loop dan Traversal </li>
</ul>
</li>
<li>
Pelajaran 3
<ul>
<li>
Komposisi JavaScript
<ul>
<li> ecmascript </li>
<li> dom </li>
<li> bom </li>
<li> Sumber Kompatibilitas JavaScript </li>
</ul>
</li>
<li> Lokasi, kelebihan dan kerugian dari JavaScript </li>
<li> Variabel, tipe, tipeof, konversi tipe data, ruang lingkup variabel </li>
<li>
Penutup
<ul>
<li> Apa itu penutupan </li>
<li> Aplikasi Sederhana </li>
<li> Penutupan Kelemahan </li>
</ul>
</li>
<li> Operator </li>
<li> Kontrol aliran program </li>
<li>
Penggunaan timer
<ul>
<li> SetInterval </li>
<li> setTimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.