การสร้าง manu เม นู ด้วย bootstrap บูส แตร๊ป ระหว่าง static top navbar สตาติกท๊อปแน๊บบาร์กับfixed top navbar ฟิกท็อปบาร์

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

sonram
PHP Sr. Member
PHP Sr. Member
โพสต์: 81
ลงทะเบียนเมื่อ: 11/07/2016 10:05 am

การสร้าง manu เม นู ด้วย bootstrap บูส แตร๊ป ระหว่าง static top navbar สตาติกท๊อปแน๊บบาร์กับfixed top navbar ฟิกท็อปบาร์

โพสต์โดย sonram » 14/07/2016 7:03 pm

การสร้าง manu (เม นู) ด้วย bootstrap (บูส แตร๊ป) ระหว่าง static top navbar (สตาติก ท๊อป แน๊บบาร์) กับ fixed top navbar (ฟิก ท็อป บาร์)

การ fixed top navbar และ static top navbar สองแบบนี้ต่างกันตรงที่ static top navbar เวลาเราเลื่อนหน้าเพจลงมาเรื่อยๆ แล้วเวลาเราจะเลือกเมนูใหม่ เราก็ต้องเลื่อนขึ้นไปบนสุดของหน้าเว็บ แต่ถ้า fixed top navbar ปัญหาที่กล่าวมาจะไม่เกิดขึ้น เพราะ วิธีนี้จะทำให้ user (ผู้ใช้) เห็นเมนูของหน้าเว็บเสมอ

1. static top navbar สตาติก ท๊อป แน๊บบาร์ สังเกตดูที่ภาพ navbar จะค่อยๆหายไปเมื่อเลื่อนเพจลงมาข้างล่าง
รูปภาพ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <title></title>
</head>
<body>
<nav class="navbar navbar-default ">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
  </div><!-- /.container-fluid -->
</nav>
</body>
</html>


2. fixed top navbar (ฟิก ท็อป แน๊บ บาร์) สังเกตดูที่ navbar เมื่อเลื่อนเพจลงมาเรื่อยๆ navbar จะไม่หายไป

รูปภาพ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <title></title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
  </div><!-- /.container-fluid -->
</nav>
</body>
</html>

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน