วิธีการ - เมนูเลื่อนแนวนอน
เรียนรู้วิธีสร้างเมนูเลื่อนแนวนอนด้วย CSS
บ้าน
ข่าว
ติดต่อ
เกี่ยวกับ
สนับสนุน
บล็อก
เครื่องมือ
ฐาน
กำหนดเอง
มากกว่า
โลโก้
เพื่อน
พันธมิตร
ประชากร
งาน
วิธีการสร้างเมนูเลื่อนแนวนอน
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div class="scrollmenu">
<a href="#home">Home</a>
<a
href="#news">News</a>
<a href="#contact">Contact</a>
<a
href="#about">About</a>
...
</div>
ขั้นตอนที่ 2) เพิ่ม CSS:
เคล็ดลับในการทำให้แถบนำทางสามารถเลื่อนได้โดยใช้overflow:auto
และwhite-space: nowrap
:
ตัวอย่าง
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
เคล็ดลับ:ไปที่CSS Navbar Tutorialเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแถบนำทาง