navbar เลื่อนตามหน้าจอ HTML5 ด้วยคำสั่ง position: fixed

สอนเขียนโค้ด navbar เลื่อนตามหน้าจอ ภาษา HTML5 ด้วยคำสั่ง position: fixed โดยบทความนี้จะสอนการเขียนโค้ดสร้างเมนูผ่านแท็ก nav หรือ navbar ของ HTML5 และกำหนดให้เลื่อนตามหน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง navbar เลื่อนตามหน้าจอ HTML5 ด้วยคำสั่ง position: fixed

<style>
  * {
    padding: 0;
    margin: 0;
  }
  nav {
    width: 100%;
    display: flex;
    text-align:center;
    background-color: #eee;
    position: fixed;
    top: 0;
    left: 0;
  }
  nav a {
    list-style: none;
    width: 100%;
    padding: 1rem;
    text-decoration: none;
  }
</style>

<nav>
  <a href="#">หน้าแรก</a>
  <a href="#">สินค้า</a>
  <a href="#">ติดต่อเรา</a>
</nav>

navbar เลื่อนตามหน้าจอ ตัวอย่างใช้แท็ก nav สร้างเมนู โดยภายในแท็กใช้แท็ก a สำหรับสร้างแต่ละเมนูภายใน จากนั้นใช้คำสั่ง position: fixed ของภาษา CSS เพื่อกำหนดให้แท็ก nav มีตำแหน่งแบบคงที่ โดยกำหนดค่า top:0 และ left: 0 เพื่อให้ nav อยู่ในตำแหน่งด้านบนซ้ายของหน้าเว็บไซต์ตลอด และมีคุณสมบัติเลื่อนตามหน้าจอด้วยคำสั่ง position: fixed