มาทำ Horizontal Menu แบบ show/hide กันเถอะ

บทความของวันนี้ผมจะมาแนะนำการทำเมนู แบบ horizontal ที่มี sub ย่อย 1 ระดับกัน ที่ผมเขียนบทความนี้ก้เพราะผมไปเห็นเพื่อนบางคน เขียน javascript ยุบยับ เดี๋ยวจับ onclick ตัวนี้ ซ่อนตัวโน้น เขียนกันให้ยาวเฟื้อย มาลองวิธีแบบ jQuery ดีกว่า รับประกันความง่าย ^_^

Example:
http://www.jquerytips.com/example/menuDL.html

Code:




ขออธิบายโคดแค่ในส่วน jQuery นะครับ
$(function() {
$("#menu > dl > dd").hide();
$("#menu > dl > dt").click(function() {
$(this).parent().parent().find('dd:visible').slideUp();
$(this).parent().find('dd').css('cursor', 'pointer').slideDown();
});

});


1. แรกสุดให้ซ่อน dd ทุกตัว ที่อยู่ใน parents #menu
2. ต่อมาเป็นการจับ events เมื่อมีการคลิกที่ tag dd ที่อยู่ใน parent ของ dl และ #menu ตามลำดับ
3. ให้ซ่อน dd ทั้งหมดที่มีการแสดงผลอยู่ในขณะนี้
4. ให้แสดงผล dd ของตัวที่ถูกคลิกอยู่ในปัจจุบัน รวมทั้ง add css ให้มันอีกนิดหน่อย เพิ่มความสวยงาม

$(document).click(function() {
$("#menu > dl > dd").filter(':visible').hide();
});
ส่วนโคดด้านบนเป็นการบอกว่าเวลาคลิกที่จุดในไหนหน้าเอกสารให้ซ่อน dd ทั้งหมด

สังเกตุ
จะเห็นได้ว่าในเอกสาร HTML มีโคด นี้อยู่ด้วย

ประโยชน์ของมันก็คือเมื่อเวลามีการทำงานกับ event onclick มันจะไม่เหมารวตัวนี้เข้าไปด้วย ในที่นี้มันมีประโยชน์คือ เมื่อเราคลิกหน้าเอกสารไม่ว่าตรงไหน menu dd จะถูกปิดลง ยกเว้นเมื่อคลิกที่ dt หรือ dd เพราะเราใส่ cancelBubble ไว้ที่ paremt ของพวกมัน นั่นก็คือ dl ไว้แล้วนั่นเอง