วันศุกร์ที่ 19 กรกฎาคม พ.ศ. 2556

สอนทำเมนูแนวตั้ง แสดงผลแบบสไลด์ขึ้น/ลงด้วย jQuery (Dropdown Menu,Verical Menu)


     Jquery เป็น Javascript Framework ตัวหนึ่ง ที่ได้รับความนิยมมากที่สุดเลยก็ว่าได้ครับในตอนนี้ และอนาคตผมคิดว่ามันยังคงได้รับความนิยมไปอีกนานจนโลกแตก!!!

     เพราะมันมีความพิเศษอยู่ในตัวของมันหลายอย่าง นอกจากการใช้งานที่ง่ายแล้ว มันยังช่วยลดภาระให้กับโค๊ด Javascript ที่ยุ่งยากของเราให้สั้นกระชับและเข้าใจง่ายยิ่งขึ้นอีกด้วย รวมถึงเอฟเฟ็ก (Effect) การแสดงผลต่างๆ ที่มีให้เลือกใช้งานหลาก อาทิ การแสดงผลแบบ fadeIn  fadeOut  , สไลด์ขึ้นลง slideUp slideDown รวมถึงคำสั่ง animate ซึ่งเป็นแบบขั้นสูงขึ้นมาหน่อย ซึ่งเราสามารถกำหนดการแสดงผล ตามความต้องการของเราได้ ว่าจะให้มีลูกเล่นแบบไหน ประมาณว่า สั่งได้ดั่งใจ เลยก็ว่าได้

     วันนี้ก็เลยขอหยิบ Effect slideUp กับ slideDown มาทำเมนูให้ดูเป็นขวัญตาซักหน่อยครับ ซึ่งเมนูที่สอนจะเป็นเมนูแนวตั้งนะครับ ฝรั่งมักจะเรียกว่า Vertical Menu หรือDrop down Menu ครับ

     มาดูโค๊ดกันเลยครับ และลองนับบรรทัดโค๊ด jQuery ของผมดูครับว่าใช้กี่ไปบรรทัด แล้วทั่นจะอึ้งในความเทพของมัน อย่างที่ผมต้องคาราวะมันเลยครับ ^^