บทความนี้อธิบายวิธีการใช้เอฟเฟกต์การนำทางโดย JS+CSS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
1. รหัสโปรแกรมมีดังนี้:
การคัดลอกรหัสมีดังนี้: <! doctype html public "-// w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> CSS+JS ใช้เมนูแบบเลื่อนลงระดับอนันต์พร้อมความเข้ากันได้ดี </title>
<style type = "text/css">
*{มาร์จิ้น: 0; Padding: 0; ชายแดน: 0;}
ร่างกาย {ตัวอักษร: 12px/130% Verdana, เจนีวา, Arial, Helvetica, Sans-Serif, 安体;} li {list-style: none;}
.ClearFix: หลังจาก {เนื้อหา: ""; แสดง: บล็อก; ความสูง: 0; ล้าง: ทั้งสอง;
A: ลิงก์ {color:#000; การตกแต่งข้อความ: ไม่มี; -
A: เยี่ยมชม {color:#000; การตกแต่งข้อความ: ไม่มี; -
A: โฮเวอร์ {สี:#000; การตกแต่งข้อความ: ไม่มี; -
.MENU {WIDTH: 778PX; ความสูง: 26px; ความเป็นมา: #FFFF; มาร์จิ้น: 0 auto;}
.Menusel {Float: ซ้าย; ความกว้าง: 100px; ตำแหน่ง: ญาติ; ความสูง: 25px; ความเป็นมา: #DDD; ความสูงของสาย: 25px; ขอบซ้าย: 1px; *ระยะขอบซ้าย: 0px; _margin-left: -1px;}
.Menusel H2 {ขนาดตัวอักษร: 12px; -
.menusel a {display: block; text-allign: center; ความกว้าง: 100px; ชายแดน: 1px Solid #A4A4A4; ความสูง: 25px; ขอบด้านล่าง: 1px Solid #A4A4A4; ตำแหน่ง: ญาติ; z-index: 2;}
.Menusel A: Hover {Border: 1px Solid #A4A4A4; ขอบด้านล่าง: 1px ประ #EEEEEEEE; ตำแหน่ง: ญาติ; z-index: 2; ความสูง: 25px;}
.ahover a {border-bottom: 1px dashed #eeeeeeee; ความเป็นมา: #EEEEEEEE; -
.position {ตำแหน่ง: สัมบูรณ์; z-index: 1;}
.menusel ul {width: 125px; ความเป็นมา: #eee; ชายแดน: 1px Solid #A4A4A4; ระยะขอบด้านบน: -1px; ตำแหน่ง: ญาติ; z-index: 1; แสดง: ไม่มี;}
.Menusel .Block {display: block;}
.Typeul li {ขอบด้านล่าง: 1px ประ #A4A4A4; ความกว้าง: 125px; ตำแหน่ง: ญาติ; ลอย: ซ้าย; -
.Typeul li a {ชายแดน: ไม่มี; ความกว้าง: 125px; -
.Typeul li a: โฮเวอร์ {ชายแดน: ไม่มี; พื้นหลัง: #DDD;}
.Typeul {MARGIN-Left: 0; -
.Typeul ul {ซ้าย: 125px; ด้านบน: 0; ตำแหน่ง: สัมบูรณ์;}
.fli {margin -left: -1px; ชายแดนซ้าย: #eeeeee Solid 1px;}
.menusel .lli {ชายแดน: ไม่มี; -
</style>
<script type = "text/javaScript"> document.execommand ("backgroundImageCache", false, true); </script> <!-IE6 ปัญหาภาพพื้นหลังการกะพริบ->>
</head>
<body>
<div>
<div id = "menu1">
<h2> <a href = "/"> เมนู 1 </a> </h2>
<div>
<ul>
<li> <a href = "// www.vevb.com"> ตัวเลือกเมนู 1-2 </a> </li>
<li>
<a href = "#"> ตัวเลือกเมนู 1-2 </a>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 1-2-1 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> ตัวเลือกเมนู 1-2 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 1-2 </a> </li>
</ul>
</div> <!-ตำแหน่ง->
</div> <!-เมนู->
<div id = "menu2">
<H2> <a href = "#"> เมนู 2 </a> </h2>
<div>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 2-2 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 2-2 </a>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 2-2-1 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 2-2-2 </a>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 2-2-1 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> ตัวเลือกเมนู 2-2 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 2-2 </a> </li>
</ul>
</div> <!-ตำแหน่ง->
</div> <!-เมนู->
<div id = "menu3">
<H2> <a href = "#"> เมนู 3 </a> </h2>
<div>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 3-2 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 3-2 </a>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 3-2-1 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 3-2-2 </a>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 3-2-1 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 3-2-2 </a>
<ul>
<li> <a href = "#"> ตัวเลือกเมนู 3-2-1 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> ตัวเลือกเมนู 3-2 </a> </li>
<li> <a href = "#"> ตัวเลือกเมนู 3-2 </a> </li>
</ul>
</div> <!-ตำแหน่ง->
</div> <!-เมนู->
</div> <!-เมนู->
<script type = "text/javascript">
สำหรับ (var x = 1; x <4; x ++)
-
var menuid = document.getElementById ("เมนู"+x);
menuid.num = x;
พิมพ์();
-
ประเภทฟังก์ชัน ()
-
var menuh2 = menuid.getElementsByTagname ("H2");
var menuul = menuid.getElementsByTagname ("ul");
var menuli = menuul [0] .getElementsByTagname ("li");
menuh2 [0] .onmouseover = show;
menuh2 [0] .onmouseout = Unshow;
menuul [0] .onmouseover = show;
menuul [0] .onmouseout = Unshow;
ฟังก์ชั่นแสดง ()
-
menuul [0] .className = "clearfix typeul block"
-
ฟังก์ชั่น unshow ()
-
menuul [0] .className = "tyneul"
-
สำหรับ (var i = 0; i <menuli.length; i ++)
-
menuli [i] .num = i;
var liul = menuli [i] .getElementsByTagname ("ul") [0];
ถ้า (liul)
-
typeshow ()
-
-
ฟังก์ชั่น typeshow ()
-
menuli [i] .onmouseover = Showul;
menuli [i] .onmouseout = Unshowul;
-
ฟังก์ชั่น Showul ()
-
menuli [this.num] .getElementsByTagname ("ul") [0] .className = "block";
-
ฟังก์ชั่น unshowul ()
-
menuli [this.num] .getElementsByTagname ("ul") [0] .className = "";
-
-
</script>
</body>
</html>
2. เอฟเฟกต์โปรแกรม
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน