การสร้าง Navigation Bar ด้วย CSS

สรุปสั้น ๆ ก่อนเริ่มอ่าน

สำหรับใครที่ได้เริ่มหัดเขียน web page หรือ web application แต่ยังติดปัญหาไม่แน่ใจว่าควรจะสร้าง รายการเมนู หรือ Navigator bar อย่างไรดี ในบทความนี้ ผมจะมาเสนอวิธีสร้าง Navigator bar ด้วย CSS สำหรับ website ตั้งแต่การสร้างเบื้องต้น จนไปถึงทำให้น้อง Navigator bar ของเรา

รองรับการแสดงผลในขนาดหน้าจอต่าง ๆ อย่างถูกต้อง (หรือเรียกอีกชื่อว่า Responsive) หากใครที่ยังไม่แน่ใจว่าจะเริ่มจากจุดไหนดี บทความนี้ ก็จะเป็นอีกหนึ่งตัวช่วย ทีทำให้สามารถเริ่มสร้าง Navigator bar ในระดับต้นได้อย่างแน่นอน !!

เขียนโดย

Thitipong Rattanamaneeratsamee

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 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

การสร้าง Navigation Bar ด้วย CSS

สรุปสั้น ๆ ก่อนเริ่มอ่าน

โครงสร้าง Navigator bar ใน HTML

โครงสร้าง Navigator bar เบื้องต้นใน CSS

โครงสร้าง Navigator bar ใน CSS สำหรับ Responsive

สุดท้ายก่อนจากกัน

อ้างอิง

เลือกเรียนรู้

สนับสนุนพวกเรา

สำหรับภาคการศึกษา

ศูนย์ให้ความช่วยเหลือ

บริการจากเรา

เกี่ยวกับ BorntoDev

ได้รับการรับรองจาก

การสร้าง Navigation Bar ด้วย CSS

สรุปสั้น ๆ ก่อนเริ่มอ่าน

โครงสร้าง Navigator bar ใน HTML

โครงสร้าง Navigator bar เบื้องต้นใน CSS

โครงสร้าง Navigator bar ใน CSS สำหรับ Responsive

สุดท้ายก่อนจากกัน

อ้างอิง

Related Posts

การแก้ไข Component เฉพาะจุด ใน Figma

UI stack – สิ่งสำคัญที่ Designer ไม่ควรมองข้าม

ความแตกต่างระหว่าง JSON และ XML

เลือกเรียนรู้

สนับสนุนพวกเรา

สำหรับภาคการศึกษา

ศูนย์ให้ความช่วยเหลือ

บริการจากเรา

เกี่ยวกับ BorntoDev

ได้รับการรับรองจาก