บทความนี้อธิบายถึงวิธีการใช้เมนูหน้าเว็บคลิกขวาที่กำหนดเองพร้อมไดเรกทอรีหลายระดับใน JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
นี่เป็นคุณสมบัติเว็บเมาส์ที่ดีมาก รหัสนี้สามารถควบคุมเมนูคลิกขวาของเมาส์ในหน้าเว็บและสร้างขึ้นอย่างสมบูรณ์ตามความต้องการของคุณ สามารถแสดงในแคตตาล็อกหลายระดับ
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<tite> JS หน้าเว็บที่กำหนดเองเมนูการนำทางหลายระดับ </title>
<style type = "text/css">
html, body {ความสูง: 100%; overflow: hidden;}
ร่างกาย, div, ul, li {margin: 0; padding: 0;}
ร่างกาย {ฟอนต์: 12px/1.5/5fae/8f6f/96c5/9ed1;}
ul {ประเภทรายการประเภท: ไม่มี;}
#rightmenu {ตำแหน่ง: Absolute; top: -9999px; ซ้าย: -9999px;}
#rightmenu ul {float: left; border: 1px solid #979797; พื้นหลัง: #f1f1f1 url (images/line.png) 24px 0 repeet-y; padding: 2px; box-shadow: 2px 2px 2px rgba (0,0,0,0, .6);
#rightmenu ul li {float: ซ้าย; Clear: ทั้งสอง; ความสูง: 24px; เคอร์เซอร์: ตัวชี้; สายไฟ: 24px; พื้นที่สีขาว: Nowrap; padding: 0 30px;}
#RightMenu ul li.sub {พื้นหลัง-ซ้ำ: ไม่มีการทำซ้ำ; พื้นหลังตำแหน่ง: ขวา 9px; ภาพพื้นหลัง-ภาพ: url (images/arrow.png);}
#rightmenu ul li.active {พื้นหลังสี: #f1f3f6; Border-Radius: 3px; Border: 1px solid #aecff7; ความสูง: 22px; สายไฟ: 22px; พื้นหลัง-ตำแหน่ง: ขวา -8px;
#rightmenu ul ul {display: none; ตำแหน่ง: สัมบูรณ์;}
</style>
<script type = "text/javascript">
var getOffset = {
ด้านบน: ฟังก์ชั่น (obj) {
ส่งคืน obj.offsettop + (obj.offsetparent? arguments.callee (obj.offsetparent): 0)
-
ซ้าย: ฟังก์ชั่น (obj) {
ส่งคืน obj.offsetleft + (obj.offsetparent? arguments.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 = "ไม่มี";
สำหรับ (i = 0; i <ali.length; i ++)
-
// เพิ่มลูกศรลงใน LI ที่มีเมนูย่อย
Ali [i] .getElementsByTagname ("ul") [0] && (Ali [i] .className = "Sub");
// ย้ายเข้ามา
Ali [i] .onMouseOver = function ()
-
var othis = this;
var oul = othis.getElementsByTagname ("ul");
// ย้ายเมาส์ไปตามสไตล์
othis.className += "active";
// แสดงเมนูย่อย
ถ้า (OUL [0])
-
ClearTimeout (Hidetimer);
showtimer = settimeout (ฟังก์ชัน ()
-
สำหรับ (i = 0; i <othis.parentNode.children.length; i ++)
-
othis.parentNode.children [i] .getElementsByTagname ("ul") [0] &&
(othis.parentNode.children [i] .getElementsByTagname ("UL") [0] .style.display = "ไม่มี");
-
OUL [0] .style.display = "block";
OUL [0] .style.top = othis.offSettop + "px";
OUL [0] .style.left = othis.offsetWidth + "px";
Setwidth (OUL [0]);
// ช่วงการแสดงผลสูงสุด
MaxWidth = ADOC [0] - OUL [0] .OffSetWidth;
MaxHeight = ADOC [1] - OUL [0] .OffSetheight;
// ป้องกันการล้น
MaxWidth <getOffset.left (OUL [0]) && (OUL [0] .style.left = -oul [0] .ClientWidth + "px");
MaxHeight <getOffset.top (OUL [0]) && (oul [0] .style.top = -oul [0]
}, 300);
-
-
// เมาส์ออก
Ali [i] .onmouseout = function ()
-
var othis = this;
var oul = othis.getElementsByTagname ("ul");
// Mouse Out Style
othis.className = othis.classname.replace (// s? active/, "");
ClearTimeOut (Showtimer);
hidetimer = settimeout (ฟังก์ชัน ()
-
สำหรับ (i = 0; i <othis.parentNode.children.length; i ++)
-
othis.parentNode.children [i] .getElementsByTagname ("ul") [0] &&
(othis.parentNode.children [i] .getElementsByTagname ("UL") [0] .style.display = "ไม่มี");
-
}, 300);
-
-
// ปรับแต่งเมนูคลิกขวา
document.oncontextMenu = ฟังก์ชั่น (เหตุการณ์)
-
var event = เหตุการณ์ || window.event;
omenu.style.display = "block";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
Setwidth (aul [0]);
// ช่วงการแสดงผลสูงสุด
MaxWidth = ADOC [0] - OMENU.OffSetWidth;
MaxHeight = ADOC [1] - OMENU.OffSetheight;
// ป้องกันเมนูล้น
Omenu.offSettop> maxHeight && (omenu.style.top = maxHeight + "px");
omenu.offsetleft> maxWidth && (omenu.style.left = maxWidth + "px");
กลับเท็จ;
-
// คลิกเพื่อซ่อนเมนู
document.onclick = function ()
-
omenu.style.display = "ไม่มี"
-
// โปรดความกว้างที่ใหญ่ที่สุดใน LI และมอบหมายให้ทุกคนในระดับเดียวกัน
ฟังก์ชั่น setwidth (obj)
-
MaxWidth = 0;
สำหรับ (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;
-
สำหรับ (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxWidth+"px";
-
-
</script>
</head>
<body>
<enter> เมนูคลิกขวาที่กำหนดเองโปรดคลิกขวาที่หน้าเพื่อดูเอฟเฟกต์ </enter>
<div id = "rightmenu">
<ul>
<li> <strong> JavaScript Learning </strong> </li>
<li>
wulin.com
<ul>
<li> การวิเคราะห์หลักการเอฟเฟกต์พิเศษของหน้าเว็บ </li>
<li> ตอบสนองต่อการกระทำของผู้ใช้ </li>
<li> เอฟเฟกต์กล่องพรอมต์ </li>
<li> กิจกรรมที่ขับเคลื่อนด้วย </li>
<li> การดำเนินการแอตทริบิวต์องค์ประกอบ </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> เปลี่ยนสีพื้นหลังของหน้าเว็บ </li>
<li> การถ่ายโอนพารามิเตอร์ฟังก์ชัน </li>
<li> การเขียนฟังก์ชั่นการใช้ซ้ำที่สูง </li>
<li> 126 เอฟเฟกต์การเลือกกล่องจดหมาย </li>
<li> การดำเนินการวนซ้ำและการสำรวจ </li>
</ul>
</li>
<li>
บทที่ 3
<ul>
<li>
การแต่งเพลงจาวาสคริปต์
<ul>
<li> ecmascript </li>
<li> dom </li>
<li> bom </li>
<li> แหล่งความเข้ากันได้ของ JavaScript </li>
</ul>
</li>
<li> ตำแหน่งข้อดีและข้อเสียของ JavaScript </li>
<li> ตัวแปร, ประเภท, typeof, การแปลงชนิดข้อมูล, ขอบเขตตัวแปร </li>
<li>
การปิด
<ul>
<li> การปิดคืออะไร </li>
<li> แอปพลิเคชันง่าย ๆ </li>
<li> ปิดข้อเสีย </li>
</ul>
</li>
<li> ตัวดำเนินการ </li>
<li> การควบคุมการไหลของโปรแกรม </li>
<li>
การใช้ตัวจับเวลา
<ul>
<li> setInterval </li>
<li> settimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน