วิธีทำ Fully Expand เมนูหลักแบบเต็มหน้าจอด้วย Bootstrap Framework
Fully Expand Menu คือเมนูที่เมื่อเรา Click หรือ Hover การแสดงผลจะแสดงเป็นแผ่นแบบเต็มหน้าจอและในแผ่นนั้นจะมีเนื้อหาต่าง ๆ อาจจะเป็นข้อความ รูปภาพหรือลิงค์เมนูย่อย เมนูแบบ Fully Expand นอกจากจะเป็นที่นิยมใช้กันทั่วไปในปัจจุบันแล้วยังมีประโยชน์เรื่องของการพัฒนาเว็บไซต์แบบเน้น UX หรือ User Experience อีกด้วย การใช้เมนูในลักษณะนี้
เป็นการเพิ่มการเชื่อมโยงลิงค์ภายในเว็บไซต์พร้อมทั้งอธิบายเนื้อหาที่สัมพันธ์กันกับลิงค์เพื่อให้ผู้ใช้งานรู้ก่อนว่าลิงค์ที่จะคลิกเข้าไปจะเจอเนื้อหาเกี่ยวกับอะไร Expand Menu มีความคล้ายคลึงกับ Sub Menu เพียงแต่สามารถให้ข้อมูลที่มากกว่าและหลากหลายกว่านั่นเอง
เตรียมความพร้อมดาวน์โหลด Bootstrap
ในบทความนี้จะใช้ Bootstrap Framework ในการทำ Expand Menu เพราะฉะนั้นเริ่มต้นให้เราไปดาวน์โหลด Bootstrap Framework ได้ที่เว็บไซต์ getbootstrap.com เมื่อดาวน์โหลดไฟล์มาแล้วให้สร้างไฟล์ index.html และทำการ include เรียกใช้งาน css และ javascript ดังนี้
index.html
เรียกใช้งานไฟล์ .css หลักของ bootstrap framework
<link rel="stylesheet" href="css/bootstrap.min.css">
เรียกใช้งาน jQuery และไฟล์ .js ของ Bootstrap framework
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
จากนั้นในส่วนของ body ให้เราสร้าง html โดยใช้ class ต่าง ๆ ตามความสามารถของ bootstrap ดังนี้ครับ
<div class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">หน้าแรก <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li> <div class="content">สร้าง Content เพิ่มในส่วนนี้</div> </li> </ul> </li> <li><a href="#">ผลิตภัณฑ์</a></li> </ul> </div>
จากตัวอย่าง html code ด้านบนจะยังไม่สามารถใช้งาน expand menu ได้ เหตุผลเพราะว่าค่าเริ่มต้นของ bootstrap สำหรับ dropdown menu จะไม่ได้แสดงผลแบบ full width หรือเต็มหน้าจอแต่จะแสดงผลตามขนาดของเนื้อหาด้านใน ซึ่งเนื้อหาด้านใน จากตัวอย่างด้านบนคือคลาส content ซึ่งจะเป็นส่วนที่ใช้แสดงผลข้อมูลทั้งรูปภาพและข้อความเมื่อมีการ click หรือ hover ที่เมนูนั้น ๆ
ปรับปรุง CSS ต้นแบบของ Bootstrap ให้ Full Width
CSS เริ่มต้นของคลาส dropdown ใน Bootstrap จะแสดงความกว้างเท่ากับขนาดของเมนูนั้น ๆ เราสามารถปรับขนาดของคลาส dropdown เพื่อให้แสดงผลแบบ full width ได้โดยสามารถเขียนได้ดังนี้ครับ
<style> .nav > li.dropdown { position: static; } .nav > li.dropdown .dropdown-menu { width:100%; text-align: left; left:0; right:0; } .nav > li.dropdown.open { position: static; } .nav > li.dropdown.open .dropdown-menu { text-align: left; left:0; right:0; } .dropdown-menu>li { height:350px; } .content{ padding:30px; } </style>
เพิ่ม Slide Effect ให้กับ Expand Menu
จากโค๊ดด้านบน ถ้าเราลองทดสอบดูจะเห็นว่าสามารถใช้งาน Expand Menu ได้แล้ว แต่ก็เป็นการ Expand แบบทื่อ ๆ คือคลิกก็แสดงเลยเพราะจะหายไปก็หายไปเลย ไม่มีการ Slide หรือ Fade ส่วนนี้เราสามารถเพิ่ม Effect ได้โดยการเขียน Javascript เพิ่มเข้าไปได้ดังนี้ครับ
$('.dropdown').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); $('.dropdown').on('hide.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); });
เพียงเท่านี้เราก็จะได้ fully expand menu ที่มีการสไลด์ตั้งตอนเปิดและปิดเมนูแล้วครับ ส่วนเนื้อหาในเมนูเราสามารถเขียนเพิ่มเข้าไปภายใน div คลาสที่ชื่อว่า content ได้เลยครับ ดูตัวอย่างการทำงานด้านล่างครับ
เพิ่มเติมนะครับ การทำ effect แบบ SlideDown และ SlideUp เป็นการใช้ความสามารถร่วมกันระหว่าง jQuery และ bootstrap framework คือใช้ Event ของ bootstrap และใช้คำสั่ง เลื่อนขึ้น-ลง ของ jQuery นั่นเป็นเหตุผลทำให้เราสามารถเปลี่ยนรูปแบบ effect เป็นแบบอื่นได้เช่นเปลี่ยนจาก slide effect เป็น fade effect ตัวอย่างเช่น
$(this).find('.dropdown-menu').first().stop(true, true).fadeIn("fast"); $(this).find('.dropdown-menu').first().stop(true, true).fadeOut("fast");
ท่านสามารถดูตัวอย่างการทำงานของ expand menu และตัวอย่างโค๊ดทั้งหมดได้ที่ลิงค์ด้านล่างครับ