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

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

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

sonram
PHP Sr. Member
PHP Sr. Member
Posts: 81
Joined: 11/07/2016 10:05 am

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

Post by 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 จะค่อยๆหายไปเมื่อเลื่อนเพจลงมาข้างล่าง
Image

Code: Select all

<!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 จะไม่หายไป

Image

Code: Select all

<!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
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 14 guests