1. ภาพรวม
การใช้เมนูแบบลอยตัวแบบป๊อปอัพไม่เพียง แต่ทำให้เนื้อหาการนำทางของเว็บไซต์ชัดเจนขึ้น แต่ยังไม่ส่งผลกระทบต่อผลกระทบโดยรวมของหน้า เรียกใช้ตัวอย่างนี้ดังแสดงในรูปที่ 1 เมื่อเมาส์เคลื่อนที่ไปยังชื่อของเมนูการนำทางระดับแรกเมนูลอยจะปรากฏขึ้นเพื่อแสดงเมนูย่อยที่สอดคล้องกับเมนู เมื่อเมาส์เคลื่อนที่ออกเมนูลอยจะถูกซ่อนไว้
2. คะแนนทางเทคนิค
ตัวอย่างนี้ส่วนใหญ่อยู่ใน JavaScript การเปลี่ยนค่าแอตทริบิวต์การแสดงผลของแอตทริบิวต์สไตล์ของวัตถุแท็ก <div> แบบไดนามิกแบบไดนามิกเป็นแบบไดนามิกและซ่อนเมนูการนำทางรอง ในความเป็นจริงเนื้อหาของเมนูรองภายใต้แต่ละเมนูระดับหนึ่งได้ถูกเพิ่มลงในแท็ก <div> ของหน้าเว็บ แต่มีการตั้งค่า <div> ในเวลานี้และจะไม่ปรากฏ ดังนั้นใน JavaScript เมื่อเมาส์ผ่านชื่อการนำทางจะต้องเรียกวัตถุ <Div> ที่ระบุไว้เท่านั้นและปรับเปลี่ยนแอตทริบิวต์การแสดงผลแบบไดนามิก แอตทริบิวต์การแสดงผลมีค่าแอตทริบิวต์สองค่าสำหรับการแสดงผลและที่ซ่อนอยู่คือไม่มี (ซ่อน) และบล็อก (จอแสดงผล)
ตัวอย่างเช่น: มีแท็ก <div> ที่มี ID ของ MyDIV ในหน้าเว็บและสิ่งนี้ <div> นี้ถูกตั้งค่าให้ซ่อน ใน JavaScript วิธีการเขียนเพื่อควบคุมการแสดงผลของ <div> นี้มีดังนี้:
document.getElementById ("mydiv"). style.display = "block";3. การใช้งานเฉพาะ
(1) เขียนวิธี JavaScript สำหรับการแสดงและซ่อน เมนูรองจะปรากฏขึ้นเมื่อเมาส์ผ่านชื่อเมนูหลักและเมนูรองจะถูกซ่อนเมื่อเมาส์เคลื่อนที่ออกมา รหัสคีย์มีดังนี้:
การเปลี่ยนแปลงฟังก์ชั่น (img, submenu, path, type) {img.src = "images/"+path+". gif"; ถ้า (submenu! = null) {ถ้า (type == 0) {submenu.style.display = "ไม่มี";(2) ในหน้าเพิ่มเนื้อหาของเมนูรองลงในเมนูการนำทางหลักแต่ละรายการในแท็ก <div> ล่วงหน้าและตั้งค่าแท็ก <div> ของเมนูรองเพื่อซ่อน รหัสคีย์มีดังนี้:
<div id = "nuser" style = "พื้นหลังสี:#f3ffd5; ชายแดน:#75a102 1px ของแข็ง; ความกว้าง: 200px; ตำแหน่ง: สัมบูรณ์; แสดง: ไม่มี; ซ้าย: 1px; top: 34px;"> <table cellpacing = "0" cellpadding = "0" ข้อมูล </a> <a href = "#"> เพิ่มพนักงานใหม่ </a> </td> </tr> </table> </div> ... // เนื้อหาของเมนูรองอื่น ๆ ถูกละไว้ที่นี่
(3) ตั้งค่า onmouseover และ onmouseout events ใน <td> ของตารางของเมนูหลักเรียกใช้วิธี JavaScript Change () ที่กำหนดไว้ในขั้นตอน (1) และเปลี่ยนการแสดงผลและซ่อนเมนูรอง <div> รหัสคีย์มีดังนี้:
<td onMouseOver = "การเปลี่ยนแปลง (imguser, nuser, 'nuser_r', 1)" onmouseout = "เปลี่ยน (imguser, nuser, 'nuser_b', 0)" สไตล์ = "เคอร์เซอร์: มือ;"> <img id = "imguser" src = " ละเว้น </td>
ด้านบนเป็นเมนูลอยป๊อปอัพของแถบการนำทางที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!