CSS เมนูแบบเลื่อนลง

รหัสของเราส่งคืนดังต่อไปนี้:

จนถึงตอนนี้ เรายังไม่ได้เพิ่มสไตล์ใดๆ ลงในเมนูดรอปดาวน์ของเรา ดังนั้นมันจึงปรากฏเป็น HTML ธรรมดา นี่คือรหัสที่เราจะใช้เพื่อจัดรูปแบบเมนูดรอปดาวน์ของเราสำหรับเว็บไซต์ของสโมสรแบดมินตัน:

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

.menu {
	display: inline-block;
	position: relative;
}

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

.content a {
	text-decoration: none;
	display: block;
	color: black;
	padding: 16px;
}

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

รหัสของเราส่งคืน:

[Code result here]


มาดูกันว่าโค้ดของเราทำงานอย่างไร

คลาส dropdown_button class ใช้เพื่อจัดรูปแบบปุ่มดรอปดาวน์ ในโค้ดของเรา เราตั้งค่าสีพื้นหลังของปุ่มเป็นสีเขียวอ่อน เปลี่ยนสีของข้อความของปุ่มเป็นสีขาว เพิ่มช่องว่างภายใน 10px รอบปุ่ม กำหนดขนาดแบบอักษรของปุ่มเป็น 15px และเราลบเส้นขอบรอบๆ ปุ่ม.

คลาสเนื้อหาจัดเก็บสไตล์สำหรับเนื้อหาของเมนูดรอปดาวน์ของเรา คลาสนี้ถูกซ่อนไว้โดยค่าเริ่มต้น (โดยใช้ display:none) และมีพื้นหลังสีเทาอ่อน นอกจากนี้ ความกว้างขั้นต่ำขององค์ประกอบที่ใช้คลาสเนื้อหาคือ 150px และองค์ประกอบอยู่ในตำแหน่งที่แน่นอน คลาสเนื้อหายังมีดัชนี x เท่ากับ 1 ซึ่งทำให้ปรากฏเหนือองค์ประกอบอื่นๆ ทั้งหมดบนหน้าเว็บ

คลาสเมนูเก็บสไตล์สำหรับเมนูทั้งหมดของเรา ในโค้ดของเรา เราวางตำแหน่งเนื้อหาของ <div class=”menu”> ให้สัมพันธ์กับองค์ประกอบอื่นๆ บนหน้าเว็บ เรายังแสดงเมนูโดยใช้รูปแบบอินไลน์บล็อก ซึ่งแสดงองค์ประกอบของเราเป็นคอนเทนเนอร์แบบอินไลน์บล็อก

.content a style ใช้เพื่อจัดรูปแบบลิงก์ในเมนูดรอปดาวน์ของเรา ลักษณะนี้จะลบการขีดเส้นใต้ทั้งหมดออกจากลิงก์ (โดยใช้ text-decoration:none;) แสดงแต่ละลิงก์ในสไตล์บล็อก กำหนดสีของแต่ละลิงก์เป็นสีดำ และตั้งค่าช่องว่างภายในแต่ละลิงก์เป็น 16px

ที่ส่วนท้ายของโค้ด เราใช้กฎ .content a:hover เพื่อกำหนดสิ่งที่ควรเกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือลิงก์ในเมนูดรอปดาวน์ของเราโดยใช้เคอร์เซอร์ ในกรณีนี้ เมื่อผู้ใช้วางเมาส์เหนือลิงก์ในเมนู สีพื้นหลังของลิงก์จะเปลี่ยนเป็นสีเทาอ่อน (#f7f7f7)

นอกจากนี้เรายังได้ระบุกฎ .menu:hover .content ซึ่งแสดงเนื้อหาของเมนูของเราเป็นบล็อกเมื่อผู้ใช้วางเมาส์เหนือเมนู

หากคุณสนใจที่จะเรียนรู้ว่า CSS :hover selector ทำงานอย่างไรในเชิงลึก โปรดอ่านคู่มือ CSS :hover selector ของเรา

เมนูแบบเลื่อนลงทางขวา

ในตัวอย่างข้างต้น เราได้สร้างเมนูดรอปดาวน์โดยใช้ HTML และ CSS ที่ปรากฏทางด้านซ้ายของหน้าจอ อย่างไรก็ตาม คุณอาจตัดสินใจว่าต้องการให้เมนูแบบเลื่อนลงปรากฏที่ด้านขวาของหน้าจอ

ในการทำให้สิ่งนี้เกิดขึ้น คุณสามารถใช้กฎ CSS ต่อไปนี้กับโค้ดด้านบน:

.content {
	right: 0;
}

กฎนี้จะย้ายรายการแบบเลื่อนลงและเนื้อหาไปทางขวาของหน้าจอ

บทสรุป

สามารถใช้ HTML เพื่อสร้างโครงสร้างพื้นฐานของเมนูแบบเลื่อนลง จากนั้น คุณสามารถใช้ CSS เพื่อใช้สไตล์เพื่อสร้างเมนูดรอปดาวน์ที่สมบูรณ์และสวยงาม

บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงถึงตัวอย่าง วิธีสร้างเมนูดรอปดาวน์โดยใช้ HTML และ CSS เมื่อใช้โค้ดที่เราพูดถึงในบทความนี้ คุณจะสามารถสร้างเมนูดรอปดาวน์ของคุณเองใน HTML และ CSS