สร้าง Header/Navbar ที่ Responsive: บน Desktop แสดงแนวนอน บน Mobile ซ่อนเมนู แสดงแค่ Logo และ Hamburger (ต้องการ JS เพื่อ Toggle - ตัวอย่างมีแค่ CSS)
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box;} nav { overflow: hidden; background-color: #330b7c; padding: 10px; } .links { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; float: left; color:white; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; } nav .logo { font-size: 25px; font-weight: bold; } nav .links:hover { background-color: rgb(214, 238, 77); color: rgb(42, 10, 94); } nav .selected { background-color: dodgerblue; color: white; } .rightSection { float: right; } @media screen and (max-width: 870px) { nav .links { float: none; display: block; text-align: left; } .rightSection { float: none; } } </style> </head> <body> <nav> <a class="links logo" href="#">Company Logo/Image</a> <div class="rightSection"> <a class="selected links" href="h">Home</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">About Us</a> <a class="links" href="#">More Info</a> <a class="links" href="#">Register</a> </div> </nav> </body> </html>
การทำงาน Responsive (CSS Only)
- Desktop: Logo ซ้าย, เมนู 5 รายการขวา (
.rightSection { float: right }) - Mobile (≤870px):
float: none; display: block;ทุกอย่างเรียงแนวตั้ง ชิดซ้าย - ข้อขาด: ไม่มี Hamburger Toggle - เมนูแสดงทั้งหมดเลยบน Mobile (ยาวเกิน)
เพิ่ม Hamburger Toggle (JavaScript)
<a class="hamburger" onclick="toggleMenu()">☰</a>
<script>
function toggleMenu() {
document.querySelector('nav').classList.toggle('open');
}
</script>
<style>
@media (max-width: 870px) {
nav:not(.open) .links { display: none; }
nav.open .links { display: block; }
}
</style>
ผลลัพธ์
Header สีม่วงเข้ม Logo ซ้าย เมนูขวา Responsive ≤870px -> เรียงแนวตั้ง (แต่ขาด Toggle)
