นี่เป็นเมนูที่เรียบง่ายมาก แม้ว่าเราจะดูเรียบง่าย แต่เราก็สามารถเรียนรู้ความรู้ที่เกี่ยวข้องเกี่ยวกับ CSS และ JavaScript ได้จากตัวอย่างนี้ ซึ่งมีประโยชน์อย่างมากในการทำความเข้าใจหลักการและพื้นฐานของการสร้างเมนูแบบเลื่อนลง ในตัวอย่างนี้ ฉันใช้แท็ก DIV เป็นคอลัมน์เมนูแบบเลื่อนลง และใช้ TABLE เป็นส่วนหัวของเมนู หลักการคือการสลับคุณลักษณะการแสดงผลของคอลัมน์เมนูแบบเลื่อนลงโดยระบุการเคลื่อนไหวของเมาส์
ต่อไปนี้เป็นเอฟเฟกต์ของเมนู DIV นี้ คุณสามารถคลิกที่พื้นที่ว่างบนเพจเพื่อยกเลิกการแสดงเมนูแบบเลื่อนลง
ไซต์พอร์ทัลไซต์ไซต์เทคโนโลยีนิตยสารไซต์คอลเลกชันส่วนบุคคล
เยสกีดอทคอม
ข้อมูลตัวแทนจำหน่ายคอมพิวเตอร์
อุปกรณ์อิเล็กทรอนิกส์ที่ทันสมัย
สินา
โซฮู โซฮู
เน็ตอีส เน็ตอีส
สถานีการเขียนโปรแกรมเครือข่ายเมาส์
บันทึกเพื่อนร่วมชั้นชาวจีน
China
Software Development Network
ถ้าฉันบอกคุณว่าผลกระทบดังกล่าวต้องใช้โค้ดหลายสิบบรรทัด คุณจะเชื่อไหม?อย่างไรก็ตาม เรามาเรียนรู้วิธีการทำเมนูนี้ทีละขั้นตอนกันดีกว่า ทีละขั้นตอน ไปกันเลย
ขั้นตอนแรกคือการกำหนดสไตล์ชีต CSS สำหรับรายการเมนูและคอลัมน์เมนู ที่นี่ หากคุณไม่ทราบว่า CSS หมายถึงอะไร โปรดดูบทช่วยสอนเกี่ยวกับ CSS ใน "เว็บไซต์ข่าวคอมพิวเตอร์" เรากำหนดคลาส CSS สองคลาส คลาสหนึ่งคือ Meun และอีกคลาสคือ SubMenu Menu กำหนดสไตล์ที่แสดงที่ด้านบนของเมนู และ Submenu กำหนดสไตล์การแสดงผลของคอลัมน์เมนูแบบเลื่อนลง สิ่งที่ต้องสังเกตคือแอตทริบิวต์ CSS "position:absolute;width:200" ในเมนูย่อย สิ่งนี้จำเป็นเนื่องจากจะกำหนดตำแหน่งที่เราแสดงเมนูย่อย คุณสมบัติ CSS อื่นๆ เป็นทางเลือก ต่อไปนี้เป็นคำอธิบายของคลาส CSS ทั้งสองคลาส คุณสามารถวางย่อหน้าต่อไปนี้ไว้ระหว่าง
<สไตล์>
-
.menu {สีพื้นหลัง:สีเขียว;ความกว้าง:120; ความสูง:20;สี: สีขาว; การจัดตำแหน่งข้อความ: กึ่งกลาง;ขนาดตัวอักษร:9pt;น้ำหนักตัวอักษร:ตัวหนา}
.submenu {ตำแหน่ง: สัมบูรณ์; ด้านบน: 40; สีพื้นหลัง: lightyellow; ความกว้าง: 180; ขนาดตัวอักษร: 9pt}
-
ในขั้นตอนที่สอง มาดูโค้ด Javascript เพื่อซ่อนและแสดงคอลัมน์เมนูแบบเลื่อนลงกัน โค้ดนี้เรียบง่ายมากและควรจะเข้าใจได้ง่ายสำหรับทุกคนที่เรียนรู้ JavaScript มาบ้างแล้ว หากคุณไม่เข้าใจ Javascript โปรดดูบทความเกี่ยวกับ JavaScript ใน "เว็บไซต์ข่าวคอมพิวเตอร์" ความหมายของรหัสนี้คือเมื่อใดก็ตามที่เมาส์เข้าสู่องค์ประกอบเมนู (เมนู) คอลัมน์เมนูแบบเลื่อนลงจะแสดงโดยฟังก์ชันที่เรียกว่าแสดง ฟังก์ชันหลักของฟังก์ชัน Show นี้คือการแสดงคอลัมน์เมนูแบบเลื่อนลงปัจจุบัน ซ่อนคอลัมน์เมนูอื่นๆ และใส่รายการเมนูที่แสดงอยู่ในปัจจุบันลงในตัวแปร cm นอกจากนี้ ที่นี่ ฉันยังเพิ่มตัวจัดการเหตุการณ์การคลิกเมาส์อย่างง่าย (onclick) เมื่อคลิกเมาส์บนหน้าเว็บ คอลัมน์เมนูแบบเลื่อนลงทั้งหมดจะถูกซ่อน ด้านล่างนี้ฉันให้โปรแกรม Javascript ทั้งหมดซึ่งรวมถึงฟังก์ชันที่เรียกว่า getPos ซึ่งใช้เพื่อรับตำแหน่งการแสดงผลของคอลัมน์เมนูแบบเลื่อนลง
<สคริปต์>
varcm=null;
document.onclick = ฟังก์ชั่นใหม่ ("show (null)")
ฟังก์ชั่น getPos (el, sProp)
{var iPos = 0
ในขณะที่ (el!=null)
{iPos+=el["ออฟเซ็ต" + sProp]
el = el.offsetParent}
ส่งคืนไอพอส}
แสดงฟังก์ชัน(el,m)
{ถ้า (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"ซ้าย")
m.style.pixelTop = getPos(el,"ด้านบน") + el.offsetHeight}
ถ้า ((m!=cm) && (ซม.)) cm.style.display='none' cm=m }