JS mengimplementasikan metode menu klik kanan halaman yang sepenuhnya dapat disesuaikan dengan direktori multi-level

Penulis：Eve Cole Waktu Pembaruan：2025-05-18 07:32:02

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">

<head>

<title> js halaman web kustom menu navigasi multi-level </iteme>

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>

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>

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