เมนูแบบเลื่อนลง DIV (2)
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-20 17:00:56
คุณสามารถวางโปรแกรมนี้ไว้ระหว่างแท็ก <head></head> หรือที่ใดก็ได้บนหน้าเว็บ
ต่อไป เราต้องกำหนดรายการเมนูจริงของเรา ที่นี่ เราต้องเพิ่มตัวจัดการเหตุการณ์การเคลื่อนไหวของเมาส์ (OnMouseOver) ให้กับแต่ละรายการเมนู และปล่อยให้เหตุการณ์นี้เรียกใช้ฟังก์ชัน Show ที่เรากำหนดไว้ข้างต้น กล่าวอีกนัยหนึ่ง ทันทีที่เมาส์เข้าสู่รายการเมนูของเรา ฟังก์ชันการแสดงของเราจะเริ่มทำงาน ที่นี่ เรายังต้องกำหนดหมายเลข ID สำหรับแต่ละรายการเมนูของเรา และส่งชื่อ ID ของคอลัมน์เมนูแบบเลื่อนลงไปยังฟังก์ชัน Show ซึ่งเป็นสิ่งสำคัญสำหรับเราในการควบคุมคอลัมน์เมนูแบบเลื่อนลงด้านล่าง I ให้ชื่อ ID ของรายการเมนูคำอธิบายไวยากรณ์ HTML:
<เส้นขอบตาราง=0>
<tr>
<td ID="d1" onmouseover="show(this,ds1);" class="menu">ไซต์เทคโนโลยีนิตยสาร</td>
<td ID="d2" onmouseover="show(this,ds2);" class="menu">พอร์ทัล</td>
<td ID="d3" onmouseover="show(this,ds3);" class="menu">ไซต์โปรดส่วนตัว</td>
</tr>
</ตาราง>
สุดท้าย เราต้องกำหนดคอลัมน์เมนูแบบเลื่อนลงของเรา สำหรับแต่ละคอลัมน์เมนูแบบเลื่อนลง เราจำเป็นต้องระบุแอตทริบิวต์ CSS ของเมนูย่อยและชื่อ ID เพื่อให้ฟังก์ชัน Show ของเราสามารถควบคุมได้ สุดท้ายนี้ เราตั้งค่าโหมดการแสดงผลเริ่มต้นเป็น none ซึ่งหมายความว่าจะไม่เป็นเช่นนั้น แสดง ซึ่งทำได้โดยการกำหนด "ไม่มี" ให้กับรูปแบบการแสดงผล ด้านล่างนี้ ฉันได้ให้คำอธิบายไวยากรณ์ HTML สำหรับคอลัมน์เมนูแบบเลื่อนลง:
<DIV ID="ds1" CLASS="เมนูย่อย" STYLE="display:none">
<BR><A HREF="http:\www.yesky.com">tianji.com เยสกี้.com</A>
<BR><A HREF="http:\www.cbinews.com">ข้อมูลธุรกิจคอมพิวเตอร์</A>
<BR><A HREF="http:\www.newsoft.com.cn">แฟชั่นอิเล็กทรอนิกส์แนวใหม่</A>
<บีอาร์>
</DIV>
<DIV ID="ds2" CLASS="เมนูย่อย" STYLE="display:none">
<BR><A HREF="http:\www.sina.com.cn">ซินา ซีน่า</A>
<BR><A HREF="http:\www.sohu.com.cn">SohuSohu</A>
<BR><A HREF="http:\www.163.com">เน็ตอีส</A>
<บีอาร์>
</DIV>
<DIV ID="ds3" CLASS="เมนูย่อย" STYLE="display:none">
<BR><A HREF="http:\haoel.yeah.net">สถานีการเขียนโปรแกรมเครือข่ายเมาส์</A>
<BR><A HREF="http:\www.5460.net">เพื่อนร่วมชั้นชาวจีน</A>
<BR><A HREF="http:\www.csdn.net">เครือข่ายการพัฒนาซอฟต์แวร์ของจีน</A>
<บีอาร์>
</DIV>
นี่คือกระบวนการทั้งหมด ด้วย 4 ขั้นตอนข้างต้น คุณจะเห็นเมนูต่างๆ ปรากฏบนหน้าเว็บของคุณอย่างแน่นอน แน่นอนคุณสามารถลองเปลี่ยนคุณสมบัติของเมนูด้วยตัวเองเพื่อให้ดูเหมือนเมนูมากขึ้นได้
