ขั้นตอนการสร้างแถบเมนูและแถบเมนูย่อยใน Bootstraps (บูธสแทร็ป)
ในหลายๆครั้งที่เราประสบปัญหาการสร้างแถบเมนูในเว็บไซต์ เมื่อพอเราสร้างสำเร็จแล้ว พอเปิดจากหน้าจอคอมพิวเตอร์ทั่วไป เว็บไซต์ก็ดูปกติ ไม่มีปัญหาอะไร แต่เมื่อเราเปิดเว็บไซต์ผ่านทางหน้าจอ smartphone (สมาร์ทโฟน) หรือ Tablet (แท็บเล็ต) ตัวเมนูอาจจะไม่เป็นตามที่เราดูผ่านหน้าจอที่ใหญ่กว่า อาจจะเกิดการซ้อนกันของตัวอักษร หรือบางเมนูที่มีเมนูย่อย ก็อาจจะเรียงไม่สวย ทำให้ดูมึนงง
สำหรับวันนี้ เราจะมาแสดงตัวอย่างการสร้างเมนูที่รองรับกับสมาร์ทโฟนหรือแท็บเล็ตด้วย
1. หลังจากที่เราสร้างไฟล์ของหน้าเว็บเราแล้ว ในแท็ป 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>2. หลังจากนั้นให้เราสร้างแถบเมนูขึ้นมา
<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> 3. ใส่โค้ดสำหรับแสดงตามแถบเมนู โดยมีเงื่อนไขตามไอดีในคลาสที่เราได้กำหนดไว้ในลิ้งก์หรือตรง 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>4. เมื่อเราทำตามขั้นตอน ก็จะได้หน้าเว็บที่มีแถบเมนูดังในรูปนี้
