เมนูแบบเลื่อนลง DIV (2)
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-20 17:00:56
คุณสามารถวางโปรแกรมนี้ไว้ระหว่างแท็ก หรือที่ใดก็ได้บนหน้าเว็บ
ต่อไป เราต้องกำหนดรายการเมนูจริงของเรา ที่นี่ เราต้องเพิ่มตัวจัดการเหตุการณ์การเคลื่อนไหวของเมาส์ (OnMouseOver) ให้กับแต่ละรายการเมนู และปล่อยให้เหตุการณ์นี้เรียกใช้ฟังก์ชัน Show ที่เรากำหนดไว้ข้างต้น กล่าวอีกนัยหนึ่ง ทันทีที่เมาส์เข้าสู่รายการเมนูของเรา ฟังก์ชันการแสดงของเราจะเริ่มทำงาน ที่นี่ เรายังต้องกำหนดหมายเลข ID สำหรับแต่ละรายการเมนูของเรา และส่งชื่อ ID ของคอลัมน์เมนูแบบเลื่อนลงไปยังฟังก์ชัน Show ซึ่งเป็นสิ่งสำคัญสำหรับเราในการควบคุมคอลัมน์เมนูแบบเลื่อนลงด้านล่าง I ให้ชื่อ ID ของรายการเมนูคำอธิบายไวยากรณ์ HTML:
<เส้นขอบตาราง=0>
|
สุดท้าย เราต้องกำหนดคอลัมน์เมนูแบบเลื่อนลงของเรา สำหรับแต่ละคอลัมน์เมนูแบบเลื่อนลง เราจำเป็นต้องระบุแอตทริบิวต์ CSS ของเมนูย่อยและชื่อ ID เพื่อให้ฟังก์ชัน Show ของเราสามารถควบคุมได้ สุดท้ายนี้ เราตั้งค่าโหมดการแสดงผลเริ่มต้นเป็น none ซึ่งหมายความว่าจะไม่เป็นเช่นนั้น แสดง ซึ่งทำได้โดยการกำหนด "ไม่มี" ให้กับรูปแบบการแสดงผล ด้านล่างนี้ ฉันได้ให้คำอธิบายไวยากรณ์ HTML สำหรับคอลัมน์เมนูแบบเลื่อนลง:
นี่คือกระบวนการทั้งหมด ด้วย 4 ขั้นตอนข้างต้น คุณจะเห็นเมนูต่างๆ ปรากฏบนหน้าเว็บของคุณอย่างแน่นอน แน่นอนคุณสามารถลองเปลี่ยนคุณสมบัติของเมนูด้วยตัวเองเพื่อให้ดูเหมือนเมนูมากขึ้นได้
