สรุปสั้น ๆ ก่อนเริ่มอ่าน
สำหรับใครที่ได้เริ่มหัดเขียน web page หรือ web application แต่ยังติดปัญหาไม่แน่ใจว่าควรจะสร้าง รายการเมนู หรือ Navigator bar อย่างไรดี ในบทความนี้ ผมจะมาเสนอวิธีสร้าง Navigator bar ด้วย CSS สำหรับ website ตั้งแต่การสร้างเบื้องต้น จนไปถึงทำให้น้อง Navigator bar ของเรา
รองรับการแสดงผลในขนาดหน้าจอต่าง ๆ อย่างถูกต้อง (หรือเรียกอีกชื่อว่า Responsive) หากใครที่ยังไม่แน่ใจว่าจะเริ่มจากจุดไหนดี บทความนี้ ก็จะเป็นอีกหนึ่งตัวช่วย ทีทำให้สามารถเริ่มสร้าง Navigator bar ในระดับต้นได้อย่างแน่นอน !!
บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 13 พฤศจิกายน 2023
โครงสร้าง Navigator bar ใน HTML
ในการเริ่มต้นสร้าง Navigator bar เรามาทำความเข้าใจโครงสร้างที่จำเป็นกันก่อน โดยตามโครงสร้างพื้นฐาน HTML นั้น Navigator bar จะมี Tag ตามมาตรฐานสำหรับจัดเก็บส่วนนี้ นั่นก็คือ Tag <nav>…</nav> ( หรือในบางเว็บ ก็จะอยู่ภายใต้ Tag <header>…</header> อีกที ) ซึ่งสามารถวางโครงสร้างคร่าว ๆ ได้ ดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>การสร้าง Navigation Bar ด้วย CSS</title>
</head>
<body>
<header>
<nav>
<!-- พื้นที่เนื้อหาของ Navigation Bar -->
</nav>
</header>
</body>
</html>และนอกจากนั้น ในส่วน menu ยังสามารถนำ search-box หรือ auth-box มาไว้ใน Tag <li> ได้ด้วย ผ่าน Tag <input /> และ Tag <button>… </button> ตามลำดับ
ทั้งนี้ สามารถแบ่งส่วนต่าง ๆ ผ่าน Tag <div>…</div> พร้องระบุ class ของแต่ละส่วน เพื่อความเข้าใจ และเรียกใช้งาน CSS ในหัวข้อถัดไป
นอกจากนี้ แนะนำว่า ให้ครอบเนื้อหาของ Navigation bar ของเราด้วย <div class=”container”> และ <div class=”nav-con”> ตามลำดับ เพื่อให้ง่ายต่อการจัดการหน้าผ่าน CSS
จากส่วนต่าง ๆ ข้างต้นจะสามารถสร้าง HTML ได้ ดังนี้
...
<nav>
<div class="container">
<div class="nav-con">
<div class="logo">
<a href="#">Narbar</a>
</div>
<ul class="menu">
<li><a href="#">menu#1</a></li>
<li><a href="#">menu#2</a></li>
<li><a href="#">menu#3</a></li>
<li>
<input type="text" class="nav-search-box" /><a href="">🔍</a>
</li>
<li>
<div class="auth-box">
<button class="nav-login-btn">LOGIN</button>
<button class="nav-signup-btn">SIGNUP</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
...และเมื่อนำ Code HTML ไปรัน ก็จะได้ผลเป็นโครงสร้างพื้นฐาน ดังนี้
โครงสร้าง Navigator bar เบื้องต้นใน CSS
เริ่มต้นด้วยการ สร้าง และ import file CSS ของเราเข้าสู่ Code HTML ของเราด้วย Tag <link /> ในส่วน <head>…</head> ดังนี้
...
<head>
...
<link rel="stylesheet" href="index.css" />
</head>
...จาก Code ในส่วน (parameter) href จะต้องอ้างอิงถึง path file ของ CSS ที่เราสร้างไว้
จากนั้น ที่ไฟล์ index.css ของเรา จะเริ่มจากการ clear default web page ด้วยคำสั่ง
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}จาก Code ข้างต้น star หรือ เครื่องหมายดอกจันทร์ (*) หมายถึง Select all หรือก็คือ เลือกส่วนประกอบ (element) ของหน้าเว็บทั้งหมดให้ทำงาน ดังนี้
- margin and padding: 0 เพื่อลบขอบ default ทั้งหมดของหน้า
- box-sizing: border-box เพื่อกำหนดขนาดของกล่องที่ครอบ element ต่าง ๆ อยู่
และเมื่อนำ Code HTML ไปรัน อีกครั้ง ก็จะได้ผล ดังนี้
จากนั้น เข้าถึง class: container ของ HTML ของเรา พร้อมกำหนด style ด้วยคำสั่ง
.container {
max-width: 70vw;
margin: 0 auto;
}โดย
- max-width: 70vw หมายถึง กำหนดให้ class: container มีความกว้างสูงสุดที่ 70% ของความกว้างหน้าจอปัจจุบัน เพื่อให้มีพื้นที่ว่าง ล้อมรอบ element ที่กำหนด
- margin: 0 auto หมายถึง ให้ class: container มีระยะห่าง บนล่าง เป็น 0 และซ้าย ขวา เป็น auto คือ ให้อยู่ตำแหน่งกึ่งกลางหน้าจอนั่นเอง
ตัวอย่างผลลัพธ์
จากนั้น เข้าถึง class: nav-con ของ HTML ของเรา พร้อมกำหนด style ด้วยคำสั่ง
.nav-con {
display: flex;
justify-content: space-between;
}โดย
- display: flex หมายถึง กำหนดให้ class: nav-con ของเรา จัดวาง element ภายใน เป็นลักษณ์ flex โดยมี Defualt เป็น row ซึ่งเพื่อให้ element เรียงเป็นแถวยาวแนวนอน
- justify-content: space-between หมายถึง กำหนดให้ class: nav-con ของเรา ที่เป็น flex แล้ว มีช่องว่างระหว่าง element ทั้งหมด ซึ่งเพื่อให้ element แยกเป็น ชิดซ้าย และชิดขวานั่นเอง
ตัวอย่างผลลัพธ์
จากนั้น เข้าถึง class: menu ของ HTML ของเรา พร้อมกำหนด style ให้ display: flex เช่นกันกับ class: nav-con
ตัวอย่างผลลัพธ์
จะเห็นว่า ภายใน Tag <li> จะมีจุดด้านหน้า เราก็ควรจะนำออก โดย การเข้าถึง Tag <li> ใน class: menu และกำหนดดังนี้
.menu li {
list-style: none;
}
ตัวอย่างผลลัพธ์
จะเห็นว่า ใน Tag <a> ของเรา จะมีเส้นใต้ ที่แสดงให้เห็นว่าเป็น link เราก็ควรจะนำออก โดย การเข้าถึง Tag <a> ใน class: nav-con และกำหนดดังนี้
.nav-con a {
color: black;
text-decoration: none;
}
ตัวอย่างผลลัพธ์
จะเห็นว่า ที่ช่อง search-box icon แว้นขยาย จะยังอยู่นอกกล่อง เราก็จะจัดให้เข้าไปใน search-box ด้วย
.menu input {
margin-right: -25px;
padding: 10px;
padding-right: 25px;
height: 25px;
}
ตัวอย่างผลลัพธ์
สุดท้าย เราก็จัดรูปแบบ และสีต่าง ๆ ให้สวยงาม
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Sans Unicode";
}
.container {
max-width: 70vw;
margin: 0 auto;
}
nav {
background-color: #0c0c0c;
}
.nav-con {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.menu {
display: flex;
}
.menu li {
list-style: none;
margin-left: 1rem;
}
.nav-con a {
color: #cccccc;
text-decoration: none;
}
.logo a {
font-size: 1.5rem;
font-weight: bolder;
}
.menu input {
margin-right: -25px;
padding: 10px;
padding-right: 25px;
background-color: #2e2e2e;
border: 0px;
border-radius: 25px;
color: #cccccc;
height: 25px;
}
.menu input:focus {
border: 0px;
outline: none;
}
.menu button {
padding: 0 1rem;
background-color: #2e2e2e;
border: 0px;
border-radius: 25px;
color: #cccccc;
height: 25px;
}
ตัวอย่างผลลัพธ์
โครงสร้าง Navigator bar ใน CSS สำหรับ Responsive
จาก Best Practices ที่ว่า A Mobile-first Approach to Responsive Web Design หรือหมายถึง ให้เริ่มออกแบบเว็บไซต์จากขนาดหน้าจอที่เล็กที่สุดก่อน แล้วค่อยขยายขึ้นไป เราก็จะเริ่มจากขนาดที่เล็กที่สุดที่ความกว้าง 320px หรือเรียกดูง่าย ๆ ที่ Chrome > F12 > Toggle device toolbar (Ctrl + Shift +M) และเลือกขนาดหน้าจอที่เล็กสุดดังภาพ ( Mobile S – 320px )
ตัวอย่างผลลัพธ์
โดยเครื่องมือนี้ จะช่วยให้เราเห็น เวลาหน้าจอของเรา อยู่ในขนาดต่าง ๆ ได้ และจะเห็นว่า Navigator bar ของเรา ถูกบีบจนดูไม่ดี เราก็สามารถที่จะปรับได้ ด้วยคำสั่ง CSS @media โดยจะเริ่มที่ Mobile L – 425px เป็น
@media (max-width: 425px){
.nav-con {
flex-direction: column;
}
}เพื่อกำหนดให้ เมื่อขนาดหน้าจอ มีความกว้างที่ 425px หรือน้อยกว่า (ซึ่งก็หมายถึง ขนาดหน้าจอที่น้อยกว่านี้ ก็จะได้รับผลไปด้วยพอดี) ให้ class: nav-con มีการจัดเรียง element เป็นแนวตั้ง เราก็จะได้
ตัวอย่างผลลัพธ์
จะเห็นว่า ที่ class: menu ของเรา ก็จะยังเรียงเป็นแถวอยู่ เราก็ใส่ flex-direction: column; ลงไปใน .menu ด้วย พร้อมทั้งปรับความสูง (height) ของ .nav-con ให้เป็น auto เพื่อให้ขยายตาม class: menu ที่เป็นแนวตั้ง เราก็จะได้
ตัวอย่างผลลัพธ์
สุดท้าย เราก็จัดตำแหน่งต่าง ๆ ให้สวยงาม
@media (max-width: 425px) {
.logo {
margin-bottom: 1.5rem;
}
.nav-con {
padding: 1.5rem 0;
flex-direction: column;
height: auto;
}
.menu {
flex-direction: column;
text-align: center;
width: 100%;
}
.menu li {
padding: 0.5rem 0;
margin-left: 0;
}
.menu input {
width: 100%;
}
.menu button {
width: 100%;
margin: 0.5rem 0;
}
}
ตัวอย่างผลลัพธ์
สุดท้ายก่อนจากกัน
สำหรับใคร ที่อยากทำให้ Navigation Bar ของเรา มีลูกเล่นที่มากขึ้น เช่น ไม่ต้องการให้ส่วน menu ของเรา แสดงรายการตลอดเวลา ในจุดนี้ เราก็สามารถนำ script เข้ามาช่วยทำให้สามารถกดเปิด/ ปิด menu ของเราได้อีกด้วย แต่ในที่นี้ จะอยู่นอกเหนือเนื้อหาบทความ ใว้โอกาสหน้า จะเข้ามาอธิบายเพิ่มเติมในจุดนี้ หรือจะลองศึกษาจากงานที่ผมเขียนไว้ได้ที่ https://github.com/thitipongr/Blog-Platform ได้เลยครับ
อ้างอิง
- เรียนรู้การสร้าง Navbar ด้วย HTML & CSS สืบค้นเมื่อ 8 ตุลาคม 2565
จาก: https://youtu.be/xFlj1miNfcs?si=nzfvf9up-xy3Xd27 - CSS Box sizing สืบค้นเมื่อ 9 ตุลาคม 2565
จาก: https://www.mindphp.com/บทเรียนออนไลน์/บทเรียน-css/6214-css_box_sizing.html - Responsive Design: Best Practices and Considerations สืบค้นเมื่อ 10 ตุลาคม 2565
จาก: https://www.toptal.com/designers/responsive/responsive-design-best-practices
