Site icon บริษัท โค๊ดบี จำกัด

วิธีทำ Fully Expand เมนูหลักแบบเต็มหน้าจอ

codebee
bootstrap-fully-expand-เมนู-2

bootstrap-fully-expand-เมนู-2

<h3>วิธีทำ Fully Expand เมนูหลักแบบเต็มหน้าจอด้วย Bootstrap Framework<&sol;h3>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;expandmenu&sol;" target&equals;"&lowbar;blank">ดูตัวอย่าง Fully Expand Menu<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p>Fully Expand Menu คือเมนูที่เมื่อเรา Click หรือ Hover การแสดงผลจะแสดงเป็นแผ่นแบบเต็มหน้าจอและในแผ่นนั้นจะมีเนื้อหาต่าง ๆ อาจจะเป็นข้อความ รูปภาพหรือลิงค์เมนูย่อย เมนูแบบ Fully Expand นอกจากจะเป็นที่นิยมใช้กันทั่วไปในปัจจุบันแล้วยังมีประโยชน์เรื่องของการพัฒนาเว็บไซต์แบบเน้น UX หรือ User Experience อีกด้วย การใช้เมนูในลักษณะนี้<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>เป็นการเพิ่มการเชื่อมโยงลิงค์ภายในเว็บไซต์พร้อมทั้งอธิบายเนื้อหาที่สัมพันธ์กันกับลิงค์เพื่อให้ผู้ใช้งานรู้ก่อนว่าลิงค์ที่จะคลิกเข้าไปจะเจอเนื้อหาเกี่ยวกับอะไร Expand Menu มีความคล้ายคลึงกับ Sub Menu เพียงแต่สามารถให้ข้อมูลที่มากกว่าและหลากหลายกว่านั่นเอง<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>เตรียมความพร้อมดาวน์โหลด Bootstrap<&sol;h4>&NewLine;<p>ในบทความนี้จะใช้ Bootstrap Framework ในการทำ Expand Menu เพราะฉะนั้นเริ่มต้นให้เราไปดาวน์โหลด Bootstrap Framework ได้ที่เว็บไซต์ <a href&equals;"http&colon;&sol;&sol;getbootstrap&period;com" target&equals;"&lowbar;blank">getbootstrap&period;com<&sol;a> เมื่อดาวน์โหลดไฟล์มาแล้วให้สร้างไฟล์ index&period;html และทำการ include เรียกใช้งาน css และ javascript ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>index&period;html<&sol;strong><br &sol;>&NewLine;เรียกใช้งานไฟล์ &period;css หลักของ bootstrap framework<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;link rel&equals;"stylesheet" href&equals;"css&sol;bootstrap&period;min&period;css"&gt&semi;<&sol;pre>&NewLine;<p>เรียกใช้งาน jQuery และไฟล์ &period;js ของ Bootstrap framework<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script src&equals;"https&colon;&sol;&sol;ajax&period;googleapis&period;com&sol;ajax&sol;libs&sol;jquery&sol;3&period;1&period;0&sol;jquery&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi; &NewLine;&lt&semi;script type&equals;"text&sol;javascript" src&equals;"js&sol;bootstrap&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p>จากนั้นในส่วนของ body ให้เราสร้าง html โดยใช้ class ต่าง ๆ ตามความสามารถของ bootstrap ดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"navbar navbar-default"&gt&semi; &NewLine; &lt&semi;ul class&equals;"nav navbar-nav"&gt&semi; &NewLine; &lt&semi;li class&equals;"dropdown active"&gt&semi; &lt&semi;a href&equals;"&num;" class&equals;"dropdown-toggle" data-toggle&equals;"dropdown"&gt&semi;หน้าแรก &lt&semi;span class&equals;"caret"&gt&semi;&lt&semi;&sol;span&gt&semi;&lt&semi;&sol;a&gt&semi; &NewLine; &lt&semi;ul class&equals;"dropdown-menu" role&equals;"menu"&gt&semi; &NewLine; &lt&semi;li&gt&semi; &NewLine; &lt&semi;div class&equals;"content"&gt&semi;สร้าง Content เพิ่มในส่วนนี้&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine; &lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;ผลิตภัณฑ์&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p>จากตัวอย่าง html code ด้านบนจะยังไม่สามารถใช้งาน expand menu ได้ เหตุผลเพราะว่าค่าเริ่มต้นของ bootstrap สำหรับ dropdown menu จะไม่ได้แสดงผลแบบ full width หรือเต็มหน้าจอแต่จะแสดงผลตามขนาดของเนื้อหาด้านใน ซึ่งเนื้อหาด้านใน จากตัวอย่างด้านบนคือคลาส content ซึ่งจะเป็นส่วนที่ใช้แสดงผลข้อมูลทั้งรูปภาพและข้อความเมื่อมีการ click หรือ hover ที่เมนูนั้น ๆ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ปรับปรุง CSS ต้นแบบของ Bootstrap ให้ Full Width<&sol;h4>&NewLine;<p>CSS เริ่มต้นของคลาส dropdown ใน Bootstrap จะแสดงความกว้างเท่ากับขนาดของเมนูนั้น ๆ เราสามารถปรับขนาดของคลาส dropdown เพื่อให้แสดงผลแบบ full width ได้โดยสามารถเขียนได้ดังนี้ครับ <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;style&gt&semi; &NewLine;&period;nav &gt&semi; li&period;dropdown &lbrace; &NewLine;&Tab;position&colon; static&semi; &NewLine;&rcub; &NewLine;&period;nav &gt&semi; li&period;dropdown &period;dropdown-menu &lbrace; &NewLine;&Tab;width&colon;100&percnt;&semi; &NewLine;&Tab;text-align&colon; left&semi; &NewLine;&Tab;left&colon;0&semi; &NewLine;&Tab;right&colon;0&semi; &NewLine;&rcub; &NewLine;&period;nav &gt&semi; li&period;dropdown&period;open &lbrace; &NewLine;&Tab;position&colon; static&semi; &NewLine;&rcub; &NewLine;&period;nav &gt&semi; li&period;dropdown&period;open &period;dropdown-menu &lbrace; &NewLine;&Tab;text-align&colon; left&semi; &NewLine;&Tab;left&colon;0&semi; &NewLine;&Tab;right&colon;0&semi; &NewLine;&rcub; &NewLine;&period;dropdown-menu&gt&semi;li &lbrace; &NewLine;&Tab;height&colon;350px&semi; &NewLine;&rcub; &NewLine;&period;content&lbrace; &NewLine;&Tab;padding&colon;30px&semi;&Tab; &NewLine;&rcub; &NewLine;&lt&semi;&sol;style&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เพิ่ม Slide Effect ให้กับ Expand Menu<&sol;h4>&NewLine;<p>จากโค๊ดด้านบน ถ้าเราลองทดสอบดูจะเห็นว่าสามารถใช้งาน Expand Menu ได้แล้ว แต่ก็เป็นการ Expand แบบทื่อ ๆ คือคลิกก็แสดงเลยเพราะจะหายไปก็หายไปเลย ไม่มีการ Slide หรือ Fade ส่วนนี้เราสามารถเพิ่ม Effect ได้โดยการเขียน Javascript เพิ่มเข้าไปได้ดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;'&period;dropdown'&rpar;&period;on&lpar;'show&period;bs&period;dropdown'&comma; function&lpar;e&rpar;&lbrace; &NewLine; &dollar;&lpar;this&rpar;&period;find&lpar;'&period;dropdown-menu'&rpar;&period;first&lpar;&rpar;&period;stop&lpar;true&comma; true&rpar;&period;slideDown&lpar;&rpar;&semi; &NewLine;&rcub;&rpar;&semi; &NewLine; &NewLine;&dollar;&lpar;'&period;dropdown'&rpar;&period;on&lpar;'hide&period;bs&period;dropdown'&comma; function&lpar;e&rpar;&lbrace; &NewLine; &dollar;&lpar;this&rpar;&period;find&lpar;'&period;dropdown-menu'&rpar;&period;first&lpar;&rpar;&period;stop&lpar;true&comma; true&rpar;&period;slideUp&lpar;&rpar;&semi;&Tab; &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p>เพียงเท่านี้เราก็จะได้ fully expand menu ที่มีการสไลด์ตั้งตอนเปิดและปิดเมนูแล้วครับ ส่วนเนื้อหาในเมนูเราสามารถเขียนเพิ่มเข้าไปภายใน div คลาสที่ชื่อว่า content ได้เลยครับ ดูตัวอย่างการทำงานด้านล่างครับ<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;เพิ่มเติมนะครับ การทำ effect แบบ SlideDown และ SlideUp เป็นการใช้ความสามารถร่วมกันระหว่าง jQuery และ bootstrap framework คือใช้ Event ของ bootstrap และใช้คำสั่ง เลื่อนขึ้น-ลง ของ jQuery นั่นเป็นเหตุผลทำให้เราสามารถเปลี่ยนรูปแบบ effect เป็นแบบอื่นได้เช่นเปลี่ยนจาก slide effect เป็น fade effect ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;this&rpar;&period;find&lpar;'&period;dropdown-menu'&rpar;&period;first&lpar;&rpar;&period;stop&lpar;true&comma; true&rpar;&period;fadeIn&lpar;"fast"&rpar;&semi; &NewLine;&dollar;&lpar;this&rpar;&period;find&lpar;'&period;dropdown-menu'&rpar;&period;first&lpar;&rpar;&period;stop&lpar;true&comma; true&rpar;&period;fadeOut&lpar;"fast"&rpar;&semi;<&sol;pre>&NewLine;<p>ท่านสามารถดูตัวอย่างการทำงานของ expand menu และตัวอย่างโค๊ดทั้งหมดได้ที่ลิงค์ด้านล่างครับ<&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;expandmenu&sol;" target&equals;"&lowbar;blank">ดูตัวอย่าง Fully Expand Menu<&sol;a><&sol;p><&sol;blockquote>&NewLine;

Exit mobile version