วิธีทำ 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 และตัวอย่างโค๊ดทั้งหมดได้ที่ลิงค์ด้านล่างครับ