รายการด้านลง CSS
- หน้าก่อนหน้า แถวนำนอน CSS
- หน้าต่อไป คลังรูปภาพ CSS
สร้างรายการดึงดูดที่สามารถเลื่อนหมุนได้ด้วย CSS
การแสดง: ตัวอย่างของเมนูดึงดูด
ตัวอย่าง
โปรดเคลื่อนที่ตายางไปยังตัวอย่างด้านล่าง
เมนูดึงดูดพื้นฐาน
สร้างโหนดดึงดูดที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์เหนือองค์ประกอบ
ตัวอย่าง
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>เข้ามาเกาะเหนือฉัน</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
ตัวอย่างที่อธิบาย
HTML
ใช้องค์ประกอบใดก็ได้เพื่อเปิดเนื้อหาของเมนูดึงดูด เช่น <span> หรือปุ่ม <button>
ใช้องค์ประกอบตัวเลือก (เช่น <div>) เพื่อสร้างเนื้อหาที่ดึงดูด และเพิ่มเนื้อหาในนั้น
ใช้ <div> อุปกรณ์เพื่อล้อมรวมองค์ประกอบนี้ และจัดตำแหน่งด้วย CSS อย่างถูกต้องสำหรับเนื้อหาที่ดึงดูด
CSS
.dropdown คลาสนี้ position:relativeเมื่อเราต้องการที่จะจัดลงของเนื้อหาที่ดึงดูดด้านล่างปุ่มดึงดูด (ใช้ position:absolute) ต้องใช้คลาสนี้
.dropdown-content คลาสนี้เก็บเนื้อหาของเมนูดึงดูดที่แท้จริง โดยเริ่มต้นค่าเป็นซ่อน และจะแสดงขึ้นเมื่อมีการเลื่อนหมุน (ดูต่อไป) โปรดทราบmin-width ตั้งค่าเป็น 160px และสามารถเปลี่ยนค่านี้ได้ตลอดเวลา คำเตือน: หากคุณต้องการให้ความกว้างของสิ่งที่ดึงดูดลงด้านล่างเท่ากับความกว้างของปุ่มดึงดูด โปรดตั้งค่าความกว้างเป็น 100％ (ตั้งค่า overflow:auto สามารถทำให้เกิดการเลื่อนหน้าบนหน้าจอเล็กได้
我们用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。
当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。
下拉式菜单
创建一个下拉菜单，并允许用户从列表中选择一个选项：
本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：
ตัวอย่าง
<style>
/* 设置下拉按钮的样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容（默认隐藏） */
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">ลิงก์ 1</a>
<a href="#">ลิงก์ 2</a>
<a href="#">ลิงก์ 3</a>
</div>
</div>
เนื้อหาเมนูด้านล่างที่เรียบร้อยด้านขวา
ถ้าคุณต้องการให้เมนูด้านล่างเลื่อนมาทางขวา แทนที่จะเลื่อนมาทางซ้าย โปรดเพิ่ม right: 0;：
ตัวอย่าง
.dropdown-content {
right: 0;
}
ตัวอย่างเพิ่มเติม
1 - ภาพแถวด้านล่าง
ฉันจะให้คำแนะนำว่าวิธีเพิ่มภาพและเนื้อหาอื่น ๆ ในตัวเลือกด้านล่าง
โปรดลงมือเคาะลงมือบนภาพ:
2 - แถวด้านล่าง
ฉันจะให้คำแนะนำว่าวิธีเพิ่มเมนูด้านล่างในแถวแนวนำ
- หน้าก่อนหน้า แถวนำนอน CSS
- หน้าต่อไป คลังรูปภาพ CSS
