ในหลายๆครั้งที่เราประสบปัญหาการออกแบบ WebSiteสร้างแถบเมนูในเว็บไซต์เมื่อพอเราสร้างสำเร็จแล้ว พอเปิดจากหน้าจอคอมพิวเตอร์ทั่วไป เว็บไซต์ก็ดูปกติ ไม่มีปัญหาอะไร แต่เมื่อเราเปิดเว็บไซต์ผ่านทางหน้าจอ smartphone (สมาร์ทโฟน) หรือ Tablet (แท็บเล็ต) ตัวเมนูอาจจะไม่เป็นตามที่เราดูผ่านหน้าจอที่ใหญ่กว่า อาจจะเกิดการซ้อนกันของตัวอักษร หรือบางเมนูที่มีเมนูย่อย ก็อาจจะเรียงไม่สวย ทำให้ดูมึนงง
การสร้าง menu หลัก และ ย่อย เพื่อรองรับการใช้งานหลากหลายขนาดหน้าจอ
สำหรับวันนี้ เราจะมาแสดงตัวอย่างการสร้างเมนูที่รองรับกับสมาร์ทโฟนหรือแท็บเล็ตด้วย
โดยเริ่มต้น ตัวอย่างในบทความนี้ที่เรานำมาเสนอ จะใช้ Bootstrap Version 3 กันนะครับ โดยส่วนแรกให้เราทำการดึงในส่วนของตัว CSS ของ Bootstrap มาใช้งานก่อนด้วย
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
ต่อมาหลังจากที่เราสร้างไฟล์ของหน้าเว็บเราแล้ว ในแท็ป Style ให้เราใส่ Position เป็น Relative เพื่อกำหนดตำแหน่งที่อิงตามความสัมพันธ์กับตำแหน่งเดิม โดยข้างในจะกำหนดค่าของ Section แต่ละขนาด แต่ละสีไว้
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:300px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:300px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:300px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:300px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:300px;color: #fff; background-color: #009688;}
</style>
หลังจากนั้นให้เราสร้างแถบเมนูขึ้นมา
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ทดสอบ</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">เมนู 1</a></li>
<li><a href="#section2">เมนู 2</a></li>
<li><a href="#section3">เมนู 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">เมนู 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">เมนู 4-1</a></li>
<li><a href="#section42">เมนู 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
ใส่โค้ดสำหรับแสดงตามแถบเมนู โดยมีเงื่อนไขตามไอดีในคลาสที่เราได้กำหนดไว้ในลิ้งก์หรือตรง href
<div id="section1" class="container-fluid">
<h1>เมนู 1</h1>
<p>ข้อความ................................................................................................................................................................</p>
<p>ข้อความ................................................................................................................................................................</p>
</div>
<div id="section2" class="container-fluid">
<h1>เมนู 2</h1>
<p>ข้อความ................................................................................................................................................................</p>
<p>ข้อความ................................................................................................................................................................</p>
</div>
<div id="section3" class="container-fluid">
<h1>เมนู 3</h1>
<p>ข้อความ................................................................................................................................................................</p>
<p>ข้อความ................................................................................................................................................................</p>
</div>
<div id="section41" class="container-fluid">
<h1>เมนูย่อย 4.1</h1>
<p>ข้อความ................................................................................................................................................................</p>
<p>ข้อความ................................................................................................................................................................</p>
</div>
<div id="section42" class="container-fluid">
<h1>เมนูย่อย 4.2</h1>
<p>ข้อความ................................................................................................................................................................</p>
<p>ข้อความ................................................................................................................................................................</p>
</div>
เมื่อเราทำตามขั้นตอน ก็จะได้หน้าเว็บที่มีแถบเมนูดังในรูปนี้
โดยสรุปแล้ว ขั้นตอนในการใช้งานในส่วนของการทำ Dropdown bootstrap ก็จะเป็นดังตัวอย่างที่ได้ยกไป โดยการใช้งาน bootstrap ก็จะมีหลากหลายมากมายในส่วนของการตกแต่งหน้าเว็บไซต์ เพื่อเพิ่มความน่าสนใจ และ ลูกเล่าต่างๆ ในการใช้งาน รวมถึงฟังก์ชันที่เพิ่มความสวยงามในการใช้งานให้กับผู้ใช้งานที่เข้ามาใช้งานเว็บไซต์นั่นเอง โดยตรงส่วนนี้รวมถึงการปรับขนาดหน้าจอให้พอดีอีกด้วย
สำหรับ Source Code ในบทความสามารถดาวน์โหลดได้ที่
แถบเมนูและแถบเมนูย่อยใน Bootstrap (บูธสแทร็ป)
โดยหากท่านใดสนใจศึกษาเพิ่มเติมเกี่ยวกับรายละเอียดในส่วนของ Bootstrap ก็สามารถศึกษาเพิ่มเติมทาง Video
