ประกาศครั้งแรก:
แม้ว่าฉันจะทำงานในตำแหน่งส่วนหน้าของเว็บเป็นเวลาหลายปี แต่ฉันก็ไม่มีข้อกำหนดทางเทคนิคสูงสำหรับตำแหน่ง HTML และ CSS ถูกใช้บ่อยขึ้นและมีจาวาสคริปต์ดั้งเดิมน้อยมาก ดังนั้นเมื่อฉันเขียนจริงๆฉันพบว่ารากฐานไม่มั่นคงและฉันเรียนรู้และฝึกฝนและได้รับมาก
ภาพการทำซ้ำ:
ไม่มีเรื่องไร้สาระอีกต่อไปรหัสโพสต์
1. รหัส CSS
การคัดลอกรหัสมีดังนี้:
A: Link {Color: White; การตกแต่งข้อความ: ไม่มี;}
A: เยี่ยมชม {color: White; การตกแต่งข้อความ: ไม่มี;}
A: Hover {color: White; Text-Decorative: None;}
A: ใช้งาน {color: White; การตกแต่งข้อความ: ไม่มี;}
Li {float: ซ้าย; แสดง: inline; พื้นหลังสี:#003366; Width: 120px; text-allign: center; margin: 2px; padding: 10px 0 5px 0; ตำแหน่ง:}}
.LimouseOver {พื้นหลังสี:#0033ff; สี: สีแดง;}
.LimouseOut {พื้นหลังสี:#003366; สี: ดำ;}
li ul {display: none; width: 120px; ตำแหน่ง: Absolute; ซ้าย: 0; top: 30px;}
li ul li {margin: 0px auto; border-top: 1px solid #006699;}
2. รหัส JavaScript
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = JavaScript>
เมนูฟังก์ชั่น (เมนู 1) {
// ย้ายเมาส์เข้าและออกชื่อคลาสสลับและซ่อนและแสดงสลับ
if (document.getElementById (menu1)) {
var menu_ul = document.getElementById (menu1);
if (menu_ul.getElementsByTagname ("li"). ความยาว) {
var menu_li = menu_ul.getElementsByTagname ("li");
สำหรับ (i ใน menu_li) {
menu_li [i] .onmouseover = function () {this.className = "LimouseOver"; ถ้า (this.getElementSbyTagname ("ul"). ความยาว) {this.getElementsByTagname ("ul") [0] .style.display = "block";}}}
menu_li [i] .onmouseout = function () {this.className = "LimouseOut"; ถ้า (this.getElementsByTagname ("ul"). ความยาว) {this.getElementsByTagname ("ul") [0] .style.display = "ไม่มี";
-
-
-
-
</script>
3. รหัส HTML
การคัดลอกรหัสมีดังนี้:
<ul id = menu1>
<li> <a href = ""> บ้าน </a> </li>
<li> <a href = ""> เมนู 1 เมนู 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> เมนู 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<script> var menu1 = เมนูใหม่ ("menu1"); </script>
ภาพประกอบ:
1. การพิจารณาว่าหน้า UL และ LI ถูกใช้บ่อยขึ้นคุณสามารถเพิ่ม #menu1 ก่อน CSS เพื่อ จำกัด ขอบเขตของสไตล์เมนู
2. JS ส่วนใหญ่ฟังการเคลื่อนไหวของเมาส์และเหตุการณ์การกำจัดและเปลี่ยนเป็นรูปแบบ LimouseOver และ LimouseOut; ในเวลาเดียวกันเปลี่ยนแอตทริบิวต์การแสดงผลของเมนูน้ำเมนูย่อยเพื่อให้ได้ฟังก์ชั่นของการแสดงที่ซ่อนอยู่
3. หน้าเดียวกันสามารถเรียกได้ซ้ำ ๆ โดยไม่มีความขัดแย้ง รหัส JavaScript ในรหัส HTML เป็นอินสแตนซ์การโทร เมนู 1 ในก่อนหน้านี้เป็นชื่อตัวแปรโดยพลการและเมนู 1 ในวงเล็บคือ ID ในหน้า HTML
ข้อเสียของตัวอย่างนี้:
1. Mouseover, Mouseout และ Submenu Li ของเมนู Li เหมือนกันนั่นคือสีและตัวอักษรเดียวกันและไม่มีการตั้งค่าแยกต่างหาก
2. เนื่องจากเข้ากันได้กับ IE6 และ IE7 ตำแหน่ง: ใช้สัมบูรณ์และมีการเพิ่มแอตทริบิวต์ด้านซ้ายและด้านบน ควรตั้งค่าด้านบนตามความสูงโดยรวมของเมนู Li