วิธีสร้าง: แถวนำลงด้านลง
- 上一頁 级联下拉菜单
- 下一页 侧边导航栏中的下拉菜单
เรียนรู้ว่าจะสร้างแถวนำลงด้านลง
แถวนำลงด้านลงในแถวนำ
สร้างแถวนำลงด้านลง
เมื่อผู้ใช้เคลื่อนลูกศัพท์ไปที่ส่วนในแถวนำ จะปรากฎตัวแทนลงด้านลง
ขั้นที่ 1 - เพิ่ม HTML:
<div class="navbar"> <a href="#home">หน้าหลัก</a> <a href="#news">ข่าว</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">ลิงก์ 1</a> <a href="#">ลิงก์ 2</a> <a href="#">ลิงก์ 3</a> </div> </div> </div>
例子解釋:
ใช้ส่วนที่เป็นตัวแทนใดก็ได้เพื่อเปิดแถวนำลงไป เช่น <button> หรือ <a> หรือ <p> ตัวแทน
สร้างแถวนำลงด้านลงโดยใช้ส่วนที่เป็นตัวแทน (เช่น <div>) และเพิ่มลิงก์แถวนำลงไปด้วย。
ใช้ <div> หนึ่งตัวมีอายุรอบปุ่มและ <div> อีกตัวเพื่อใช้ CSS ในการจัดตำแหน่งแถวนำลงได้อย่างถูกต้อง。
ขั้นที่ 2 - เพิ่ม CSS:
/* ตัวแทนแถวนำ */ .navbar { overflow: hidden; background-color: #333; font-family: Arial; } /* ลิงก์ในแถวนำ */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* ตัวแทนลงด้านลง */ .dropdown { float: left; overflow: hidden; } /* ปุ่มด้านลง */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* สำหรับการจัดลำดับตัวอักษรตั้งตรงในโทรศัพท์มือถือมีความสำคัญมาก */ margin: 0; /* 對於手機上的垂直對齊非常重要 */ } /* 在鼠標懸停時為導航欄鏈接添加紅色背景色 */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } /* 下拉菜單內容(默認為隱藏) */ .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; } /* 下拉菜單中的鏈接 */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* 鼠標懸停時給下拉菜單的鏈接添加灰色背景色 */ .dropdown-content a:hover { background-color: #ddd; } /* 鼠標懸停時顯示下拉菜單 */ .dropdown:hover .dropdown-content { display: block; }
例子解釋:
我們已經為導航欄和導航欄鏈接設置了背景色、內邊距等樣式。
我們已經為下拉菜單按鈕設置了背景色、內邊距等樣式。
.dropdown
類是 .dropdown-content
的容器。由於這是一個 <div> 元素,而不是 <a> 元素,我們必須使其浮動以確保它停留在鏈接旁邊。
.dropdown-content
類包含實際的下拉菜單。它默認是隱藏的,將在鼠標懸停時顯示(見下文)。注意,最小寬度設置為 160px。請隨意更改此設置。
我們沒有使用邊框,而是使用 box-shadow
屬性,使下拉菜單看起來像一張‘卡片’。我們還使用 z-index
將下拉菜單放置在其他元素的前面。
:hover
選擇器用於在用戶將鼠標移到下拉菜單按鈕上時顯示下拉菜單。
導航欄中的可點擊下拉菜單
相關頁面
教程:CSS 下拉菜单
教程:如何創建可點擊的下拉菜單
教程:CSS 导航栏
教程:如何創建響應式頂部導航欄
- 上一頁 级联下拉菜单
- 下一页 侧边导航栏中的下拉菜单