การสร้าง Sub Menu

15 ตุลาคม 2010 ผู้ชม: 39192

เมนูย่อยก็เป็นอีกเมนูหนึ่งที่สำคัญไม่แพ้กัน ไม่ว่าจะเป็นการสร้างเพื่อเชื่อมโยงเนื้อหา ในกลุ่ม หรือในหมวดหมู่ย่อย ตามแต่ที่เราจะจัดไว้ ปัญหามันไม่ได้อยู่ที่การสร้างหรอกครับ เพราะมันออกจะสร้างง่าย แต่ตอนใช้งานนี่สิจะทำยังไง คนไม่เคย ต้องตามเข้าไปอ่านครับ

ไม่ต้องสงสัยครับว่าสร้างอย่างไร ก็สร้างแบบที่เคยสร้างเมนูมานั่นแหล่ะครับ เพียงแต่ข้อสังเกตมันอยู่ตรงนี้

ปกติแล้ว ก็เป็นอย่างภาพด้านบนแหล่ะครับ ตอนเราสร้างเมนูก็กำหนดช่อง Parent Item ไว้คือ Top ซึ่งการกำหนดไว้แบบนี้ หมายถึงว่า ให้สร้างเมนูลิ้งค์แบบปกติ แต่ถ้าเราเลือกไปที่เมนูอื่น เช่น Home

ถ้าเป็นแบบนี้ ก็จะหมายถึง ให้เมนูที่กำลังสร้างขึ้น ไปเป็น Sub Menu ของตัวที่เราเลือกนั่นเอง

ซึ่งก็จะมีลิ้งค์เมนู ห้อยต่อลงมาจาก Parent Menu เรื่อยๆ โดยเราสามารถสร้างเมนูย่อยลักษณะนี้ได้เรื่อยๆ อีก ลองไปดูกันครับ

จำไว้ง่ายๆ ว่า อยากจะสร้างเมนูย่อยไว้อันไหน ก็จิ้มที่ Parent อันนั้นแหล่ะครับ มันก็จะกลายเป็นเมนูย่อยเอง

ทีนี้ เจ้าคอลัมน์ขวาสุด Order มันเรียงยังไง ผมว่าต้องมีคนไม่ทราบบ้างแหล่ะ ซึ่งถ้าเป็นเมนูปกติ มันก็จะเรียง 1 2 3 ... ไปเรื่อยๆ แต่นี่ ทำไมเดี๋ยว 1 เดี๋ยว 2 เอ้า กลับมา 1 อีกแล้ว , ตกลงมันเรียงยังไงกันเนี่ย

มาจะกล่าวบทไป... เมนูแรกที่เป็น Parent จะถูกนับเป็นลำดับที่ 1 และ 2 ตามภาพ

แต่พอมาเป็นเมนูย่อย

ให้ดูสีเขียวก่อนนะครับ ซึ่งสีเขียว เป็นเมนูย่อยของ Home เพียง 2 เมนูเท่านั้น , ดังนั้น ในชั้นนี้ ก็จะถือว่ามีเพียงแค่ 2 ลำดับ

ส่วนสีฟ้าด้านล่าง ถูกจัดอยู่ในเมนูย่อย ต่าง Parent กัน ดังนั้น มันจะถือว่าไม่ได้อยู่ใน Parent เดียวกัน จึงมีเพียงแค่ 1 ลำดับ

ต่อมา เมนูลิ้งค์ Article A และ Article B ถูกจัดเป็นเมนูย่อย อยู่ใน Article 2 อีกที ซึ่งถึงตรงนี้เมนูลิ้งค์ Article 2 ที่เคยถูกมองว่าเป็นเมนูย่อย ก็จะกลายเป็น Parent ของ Article A และ B ไปแทน ซึ่งตรงนี้ก็เท่ากับว่า Article 2 มี Sub Menu 2 ลำดับนั่นเอง

และสุดท้าย

ในเมนูลิ้งค์ Article A ก็จะมีเมนูย่อยอยู่ข้างในอีก 3 ลำดับ เลข Order จึงเป็น 1 2 และ 3

ถ้าไม่เข้าใจ ก็ ย้อนกลับไปอ่านอีกรอบ ฮา........

เอาล่ะ ต่อมา การแสดงผลหน้าเว็บ ซึ่งมีหลายท่านสอบถามเข้ามาว่า จะทำเมนูย่อย เลื่อนๆ แบบเว็บผมยังไง , แหม ก็ขอขอบคุณที่ติดตามและยังอุตส่าห์สนใจในรายละเอียดของเว็บ เป็นปลื้มจริงๆ

เมนูย่อย ผมจะให้ Keyword ว่า Dropdown Menu ละกันครับ เมนูที่แสดงผลได้ลักษณะนี้จะเกิดได้จาก 2 ปัจจัยครับ

1. เกิดติดมากับ Template ซึ่งแทบไม่ต้องทำอะไรเลย หากเทมเพลตเหล่านั้น มีตำแหน่งเมนูหลักที่สามารถเลื่อน ( Dropdown ) ลงมาได้เอง เราแค่เพียงสร้างเมนูย่อย มันก็ใช้งานได้เลยครับ พวกนี้มักจะมีการเขียน Java Script แทรกไปกับเทมเพลตและเรียกใช้งานต่างหาก โดยเทมเพลตระดับ Premium ทั่วไป ก็มักจะมีอย่างน้อย 1 ตำแหน่ง ที่สามารถแสดงผล Dropdown Menu แบบนี้ได้
2. มากับ Module ซึ่งเทมเพลตก็จะถูกให้เรียกใช้งานจากโมดูลที่ถูกสร้างขึ้นมาโดยเฉพาะ หรือ เป็น Module ที่เราสามารถไปดาวน์โหลดมาติดตั้งเพิ่มเติมเองก็ได้ จาก Keyword ที่ให้ไป เอามาติดตั้งแล้วปรับแต่ง Parameter นิดหน่อย คลิกๆ ทีสองที สามที สี่ที ก็กลายเป็น Dropdown Menu ได้แล้วล่ะ

ซึ่งในเว็บของผม ก็ถูกเรียกใช้งานจาก Module ชนิดหนึ่งที่ถูกสร้างมาให้ใช้กับเทมเพลตนี้โดยเฉพาะนั่นเอง มันจึงสามารถเลื่อนลงมาได้อย่างที่เห็น

แน่นอน ไม่ต้องถามหา ทุกอย่างที่ท่านยังไม่เห็น ใช่ว่าจะไม่มี ในเว็บนี้ เพียงแต่ผมยังไม่นำมาเสนอนั่นเอง รออ่านต่อไปครับ จะนำ Module ที่สามารถทำ Dropdown Menu ได้ออกมาให้ชมกันหลายตัวอยู่