วิธีทำ

ฮาวทูโฮม

เมนู

ไอคอนบาร์ ไอคอนเมนู หีบเพลง แท็บ แท็บแนวตั้ง ส่วนหัวของแท็บ แท็บเต็มหน้า วางเมาส์เหนือแท็บ การนำทางยอดนิยม ตอบสนอง Topnav แถบนำทางพร้อมไอคอน ค้นหาเมนู แถบค้นหา แถบด้านข้างคงที่ การนำทางหน้า แถบด้านข้างที่ตอบสนอง การนำทางแบบเต็มหน้าจอ เมนูออฟแคนวาส เลื่อนปุ่ม Sidenav แถบด้านข้างพร้อมไอคอน เมนูเลื่อนแนวนอน เมนูแนวตั้ง การนำทางด้านล่าง การนำทางด้านล่างที่ตอบสนอง ลิงค์นำทางด้านล่าง ลิงค์เมนูชิดขวา ลิงค์เมนูตรงกลาง ลิงค์เมนูความกว้างเท่ากัน เมนูคงที่ แถบเลื่อนลงบน Scroll ซ่อนแถบนำทางบน Scroll ย่อแถบนำทางบน Scroll แถบนำทางติดหนึบ แถบนำทางบนรูปภาพ วางเมาส์เหนือรายการแบบเลื่อนลง คลิกเมนูแบบเลื่อนลง Cascading Dropdown ดรอปดาวน์ใน Topnav เมนูแบบเลื่อนลงใน Sidenav ตอบสนอง Navbar ดรอปดาวน์ เมนูการนำทางย่อย Dropup เมนูเมก้า เมนูมือถือ เมนูผ้าม่าน ยุบแถบด้านข้าง แผงข้างที่ยุบ การแบ่งหน้า เกล็ดขนมปัง กลุ่มปุ่ม กลุ่มปุ่มแนวตั้ง Sticky Social Bar การนำทางยา ส่วนหัวที่ตอบสนอง

รูปภาพ

สไลด์โชว์ แกลเลอรี่ภาพสไลด์ รูปภาพโมดอล ไลท์บ็อกซ์ ตารางภาพที่ตอบสนอง ตารางรูปภาพ แท็บแกลลอรี่ ภาพซ้อนทับจาง สไลด์ภาพซ้อนทับ ซูมภาพซ้อนทับ ชื่อภาพซ้อนทับ ไอคอนภาพซ้อนทับ เอฟเฟกต์ภาพ ภาพขาวดำ ข้อความรูปภาพ บล็อกข้อความรูปภาพ ข้อความรูปภาพโปร่งใส ภาพเต็มหน้า แบบฟอร์มบนรูปภาพ ภาพฮีโร่ ภาพพื้นหลังเบลอ เปลี่ยน Bg บน Scroll ภาพเคียงข้างกัน รูปภาพโค้งมน รูปภาพอวาตาร์ รูปภาพที่ตอบสนอง เซ็นเตอร์ อิมเมจ รูปขนาดย่อ ชายแดนรอบรูปภาพ พบกับทีม ภาพติดหนึบ พลิกภาพ เขย่าภาพ Portfolio Gallery ผลงานที่มีการกรอง ซูมภาพ แว่นขยายภาพ ตัวเลื่อนเปรียบเทียบรูปภาพ Favicon

ปุ่ม

ปุ่มแจ้งเตือน ปุ่มเค้าร่าง ปุ่มแยก ปุ่มเคลื่อนไหว ปุ่มซีดจาง ปุ่มบนรูปภาพ ปุ่มโซเชียลมีเดีย อ่านเพิ่มเติม อ่านน้อยลง กำลังโหลดปุ่ม ดาวน์โหลดปุ่ม ปุ่มยา ปุ่มแจ้งเตือน ปุ่มไอคอน ปุ่มถัดไป/ก่อนหน้า ปุ่มเพิ่มเติมในการนำทาง บล็อกปุ่ม ปุ่มข้อความ ปุ่มกลม เลื่อนไปที่ปุ่มด้านบน

แบบฟอร์ม

แบบฟอร์มเข้าสู่ระบบ แบบฟอร์มลงทะเบียน แบบฟอร์มการชำระเงิน แบบฟอร์มการติดต่อ แบบฟอร์มเข้าสู่ระบบโซเชียล แบบฟอร์มลงทะเบียน แบบฟอร์มที่มีไอคอน จดหมายข่าว แบบฟอร์มซ้อน แบบฟอร์มตอบสนอง แบบฟอร์มป๊อปอัป แบบฟอร์มอินไลน์ ล้างช่องป้อนข้อมูล ซ่อนลูกศรตัวเลข คัดลอกข้อความไปยังคลิปบอร์ด ค้นหาเคลื่อนไหว ปุ่มค้นหา ค้นหาแบบเต็มหน้าจอ ช่องป้อนข้อมูลใน Navbar แบบฟอร์มเข้าสู่ระบบใน Navbar กำหนดเอง ช่องทำเครื่องหมาย/วิทยุ เลือกเอง สวิตช์สลับ เลือกช่องทำเครื่องหมาย ตรวจจับ Caps Lock ปุ่มทริกเกอร์บน Enter การตรวจสอบรหัสผ่าน สลับการเปิดเผยรหัสผ่าน แบบฟอร์มหลายขั้นตอน เติมข้อความอัตโนมัติ ปิดการเติมข้อความอัตโนมัติ ปิดการตรวจตัวสะกด ปุ่มอัพโหลดไฟล์ การตรวจสอบความถูกต้องของอินพุตที่ว่างเปล่า

ตัวกรอง

รายการตัวกรอง ตารางตัวกรอง องค์ประกอบตัวกรอง กรองรายการแบบเลื่อนลง เรียงรายการ ตารางการสะกด

โต๊ะ

โต๊ะลายม้าลาย โต๊ะกลาง ตารางเต็มความกว้าง โต๊ะข้างเคียง ตารางตอบสนอง ตารางเปรียบเทียบ

มากกว่า

วิดีโอแบบเต็มหน้าจอ กล่องโมดอล ลบ Modal เส้นเวลา ตัวบ่งชี้การเลื่อน แถบความคืบหน้า แถบทักษะ ตัวเลื่อนช่วง เคล็ดลับเครื่องมือ แสดงองค์ประกอบ Hover ป๊อปอัพ พับได้ ปฏิทิน HTML รวม รายการสิ่งที่ต้องทำ รถตัก ระดับดาว คะแนนของผู้ใช้ เอฟเฟกต์ภาพซ้อนทับ ติดต่อชิป การ์ด พลิกการ์ด การ์ดโปรไฟล์ บัตรผลิตภัณฑ์ การแจ้งเตือน โทรออก หมายเหตุ ป้าย แวดวง สไตล์ HR คูปอง รายการกลุ่ม รายการที่ไม่มีสัญลักษณ์แสดงหัวข้อย่อย ข้อความตอบสนอง ข้อความคัตเอาท์ ข้อความเรืองแสง แก้ไขส่วนท้าย องค์ประกอบเหนียว ความสูงเท่ากัน Clearfix ลอยตัวตอบสนอง สแน็คบาร์ หน้าต่างเต็มหน้าจอ วาดเลื่อน เลื่อนเรียบ เลื่อน Bg ไล่ระดับ ติดหัว ย่อส่วนหัวบน Scroll ตารางราคา พารัลแลกซ์ อัตราส่วนภาพ Iframes ที่ตอบสนอง สลับชอบ/ไม่ชอบ สลับซ่อน/แสดง สลับโหมดมืด สลับข้อความ สลับคลาส เพิ่มคลาส ลบคลาส คลาสที่ใช้งาน วิวต้นไม้ ลบทรัพย์สิน การตรวจจับออฟไลน์ ค้นหาองค์ประกอบที่ซ่อนอยู่ เปลี่ยนเส้นทางหน้าเว็บ ซูมโฮเวอร์ พลิกกล่อง ตั้งศูนย์ในแนวตั้ง ปุ่มกลางใน DIV การเปลี่ยนแปลงเมื่อวางเมาส์เหนือ ลูกศร รูปร่าง ลิ้งค์ดาวน์โหลด องค์ประกอบความสูงเต็ม หน้าต่างเบราว์เซอร์ แถบเลื่อนแบบกำหนดเอง ซ่อนแถบเลื่อน แสดง/บังคับแถบเลื่อน ดูอุปกรณ์ เส้นขอบที่แก้ไขได้ ตัวยึดสี สีการเลือกข้อความ สีกระสุน เส้นแนวตั้ง วงเวียน ไอคอนเคลื่อนไหว นาฬิกาจับเวลาถอยหลัง เครื่องพิมพ์ดีด เร็วๆ นี้ เพจ ข้อความแชท หน้าต่างแชทแบบป๊อปอัป หน้าจอแยก ข้อความรับรอง ส่วนเคาน์เตอร์ สไลด์โชว์คำคม รายการที่ปิดได้ เบรกพอยต์อุปกรณ์ทั่วไป องค์ประกอบ HTML ที่ลากได้ JS Media Queries ปากกาเน้นข้อความ JS Animations JS String Length JS การยกกำลัง JS พารามิเตอร์เริ่มต้น รับ URL ปัจจุบัน รับขนาดหน้าจอปัจจุบัน รับองค์ประกอบ Iframe

เว็บไซต์

สร้างเว็บไซต์ฟรี ทำเว็บไซต์ สร้างเว็บไซต์แบบคงที่ สร้างเว็บไซต์ (W3.CSS) สร้างเว็บไซต์ (BS3) สร้างเว็บไซต์ (BS4) สร้างเว็บไซต์ (BS5) สร้างและดูเว็บไซต์ สร้างเว็บไซต์ลิงค์ทรี สร้างผลงาน สร้างเรซูเม่ ทำเว็บไซต์ร้านอาหาร ทำเว็บไซต์ธุรกิจ ทำเว็บบุ๊ก เว็บไซต์ศูนย์ ส่วนติดต่อ เกี่ยวกับเพจ หัวโต ตัวอย่างเว็บไซต์

กริด

เค้าโครง 2 คอลัมน์ เค้าโครง 3 คอลัมน์ เค้าโครง 4 คอลัมน์ ขยายกริด แสดงรายการมุมมองกริด เค้าโครงคอลัมน์แบบผสม การ์ดคอลัมน์ เค้าโครงซิกแซก เค้าโครงบล็อก

Google

Google Charts Google Fonts การจับคู่แบบอักษรของ Google Google ตั้งค่า Analytics

ตัวแปลงสัญญาณ

แปลงน้ำหนัก แปลงอุณหภูมิ แปลงความยาว แปลงความเร็ว

บล็อก

รับงานนักพัฒนา มาเป็น Front-End Dev

วิธีการ - ปุ่มเพิ่มเติมใน Navbar


เรียนรู้วิธีสร้างปุ่ม "เพิ่มเติม"


ปุ่ม "เพิ่มเติม" ใน Navbar


สร้างแถบนำทางแบบเลื่อนลง

สร้างเมนูแบบเลื่อนลงที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบภายในแถบนำทาง

ขั้นตอนที่ 1) เพิ่ม HTML:

ตัวอย่าง

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

ตัวอย่างที่อธิบาย

ใช้องค์ประกอบใดๆ เพื่อเปิดเมนูแบบเลื่อนลง เช่น <button>, <a> หรือ <p> องค์ประกอบ

ใช้องค์ประกอบคอนเทนเนอร์ (เช่น <div>) เพื่อสร้างเมนูแบบเลื่อนลงและเพิ่มลิงก์แบบเลื่อนลงภายใน

ล้อม <div> องค์ประกอบรอบปุ่มและ <div> เพื่อวางตำแหน่งเมนูแบบเลื่อนลงอย่างถูกต้องด้วย CSS


ขั้นตอนที่ 2) เพิ่ม CSS:

ตัวอย่าง

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

ตัวอย่างที่อธิบาย

เราได้จัดรูปแบบแถบนำทางและลิงก์แถบนำทางด้วยสีพื้นหลัง ช่องว่างภายใน ฯลฯ

เราได้จัดรูปแบบปุ่มดรอปดาวน์ด้วยสีพื้นหลัง ช่องว่างภายใน ฯลฯ

คลาส.dropdownเป็นคอนเทนเนอร์สำหรับ .dropdown-content. เนื่องจากนี่คือองค์ประกอบ <div> และไม่ใช่องค์ประกอบ <a> เราจึงต้องลอยตัวเพื่อให้แน่ใจว่าอยู่ถัดจากลิงก์

ชั้น.dropdown-contentเรียนถือเมนูดรอปดาวน์จริง มันถูกซ่อนไว้โดยค่าเริ่มต้น และจะแสดงเมื่อวางเมาส์เหนือ (ดูด้านล่าง) โปรดทราบว่าmin-widthตั้งค่าเป็น 160px อย่าลังเลที่จะเปลี่ยนสิ่งนี้

แทนที่จะใช้เส้นขอบ เราได้ใช้box-shadowคุณสมบัตินี้เพื่อทำให้เมนูดรอปดาวน์ดูเหมือน "การ์ด" เรายังใช้ดัชนี z เพื่อวางรายการแบบเลื่อนลงด้านหน้าองค์ประกอบอื่นๆ

ตัว:hoverเลือกนี้ใช้เพื่อแสดงเมนูแบบเลื่อนลงเมื่อผู้ใช้เลื่อนเมาส์ไปที่ปุ่มแบบเลื่อนลง


หน้าที่เกี่ยวข้อง

เคล็ดลับ:ไปที่CSS Dropdowns Tutorialเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับดรอปดาวน์

เคล็ดลับ:ไปที่คลิกได้ดร็อปดาวน์ของเราเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับดรอปดาวน์ที่คลิกได้

เคล็ดลับ:ไปที่CSS Navbar Tutorialเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ navbars

เคล็ดลับ:ไปที่การนำทางยอดนิยมที่ปรับเปลี่ยนตามอุปกรณ์เพื่อเรียนรู้เกี่ยวกับวิธีสร้างแถบนำทางที่ตอบสนอง